dhre-ui-kit 0.0.39 → 0.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/components/button/Button.interface.ts

@@ -1,7 +1,6 @@
 import {ReactElement} from 'react';
 import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
-
 export interface CustomButtonProps {
   title: string;
   onPress: () => void;
@@ -15,4 +14,6 @@ export interface CustomButtonProps {
   imagePosition?: 'left' | 'right';
   testID?: string;
   disabled?: boolean;
+  disabledColor?: string;
+  disableButtonTitleColor?: string;
 }

package/src/components/button/Button.tsx

@@ -18,6 +18,8 @@ const CustomButton = ({
   titleVariant = 'L2_REGULAR',
   imagePosition = 'right',
   disabled = false,
+  disabledColor,
+  disableButtonTitleColor,
 }: CustomButtonProps) => {
   const {theme} = useTheme();
   return (
@@ -26,7 +28,13 @@ const CustomButton = ({
       style={[
         styles.buttonContainer,
         containerStyle,
-        disabled ? {backgroundColor: theme.SURFACE_DISABLE} : {},
+        disabled
+          ? {
+              backgroundColor: disabledColor
+                ? disabledColor
+                : theme.SURFACE_DISABLE,
+            }
+          : {},
       ]}
       onPress={onPress}
       disabled={disabled}>
@@ -41,7 +49,13 @@ const CustomButton = ({
         style={[
           {color: '#A7A7A7'},
           textStyle,
-          disabled ? {color: theme.CONTENT_DISABLE} : {},
+          disabled
+            ? {
+                color: disableButtonTitleColor
+                  ? disableButtonTitleColor
+                  : theme.CONTENT_DISABLE,
+              }
+            : {},
         ]}
         textColor={titleColor}
       />

package/src/components/scrollList/category.tsx

@@ -3,7 +3,7 @@ import {ScrollView, Pressable, View, StyleSheet} from 'react-native';
 import CustomText from '../customText/CustomText';
 
 interface ScrollableListProps {
-  data: {name: string; value: string}[];
+  data: {name: string; value: string}[] | undefined;
   handleSelectCategory: (value: string) => void;
   containerStyle?: object;
   scrollViewContentStyle?: object;
@@ -24,7 +24,7 @@ const ScrollableList = ({
   defaultItemTextColor = 'CONTENT_SECONDRY',
 }: ScrollableListProps) => {
   const [selectedItem, setSelectedItem] = useState<string | null>(
-    data.length > 0 ? data[0].name : null,
+    data && data.length > 0 ? data[0].name : null,
   );
 
   return (

package/src/index.ts

@@ -37,6 +37,8 @@ export {default as CountryPicker} from './components/countryPicker';
 export {default as TextInput} from './components/textInput';
 
 export {FONT_STYLES} from './theme/fonts';
+export {FontStyle, Theme} from './utils/appEnum';
+
 export {DHRE_DEFAULT, DHRE_COLORS_TEXT} from './theme/colors';
 export {
   verticalScale,

package/src/theme/fonts.ts

@@ -1,5 +1,6 @@
 import {TextStyle} from 'react-native';
 import {moderateScale, verticalScale} from '../utils/stylehelper';
+import {FontStyle} from '../utils/appEnum';
 
 interface FontStyles {
   [key: string]: TextStyle;
@@ -24,55 +25,48 @@ export const serifActivFontfamily: TextStyle = {
 };
 
 export const FONT_STYLES: FontStyles = {
-  // Bold headding styles
-  H1_BOLD: createFontStyle('MeraasAktiv_Bd', 40, 56),
-  H2_BOLD: createFontStyle('MeraasAktiv_Bd', 36, 50.4),
-  H3_BOLD: createFontStyle('MeraasAktiv_Bd', 32, 44.8),
-  H4_BOLD: createFontStyle('MeraasAktiv_Bd', 26, 36.4),
-  H5_BOLD: createFontStyle('MeraasAktiv_Bd', 24, 33.6),
-  H6_BOLD: createFontStyle('MeraasAktiv_Bd', 22, 30.8),
-  H7_BOLD: createFontStyle('MeraasAktiv_Bd', 20, 28),
-  H8_BOLD: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
+  [FontStyle.H1_BOLD]: createFontStyle('MeraasAktiv_Bd', 40, 56),
+  [FontStyle.H2_BOLD]: createFontStyle('MeraasAktiv_Bd', 36, 50.4),
+  [FontStyle.H3_BOLD]: createFontStyle('MeraasAktiv_Bd', 32, 44.8),
+  [FontStyle.H4_BOLD]: createFontStyle('MeraasAktiv_Bd', 26, 36.4),
+  [FontStyle.H5_BOLD]: createFontStyle('MeraasAktiv_Bd', 24, 33.6),
+  [FontStyle.H6_BOLD]: createFontStyle('MeraasAktiv_Bd', 22, 30.8),
+  [FontStyle.H7_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
+  [FontStyle.H8_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
 
-  // Regular headding styles
-  H1_REGULAR: createFontStyle('MeraasAktiv_Rg', 40, 56),
-  H2_REGULAR: createFontStyle('MeraasAktiv_Rg', 36, 50.4),
-  H3_REGULAR: createFontStyle('MeraasAktiv_Rg', 32, 44.8),
-  H4_REGULAR: createFontStyle('MeraasAktiv_Rg', 26, 36.4),
-  H5_REGULAR: createFontStyle('MeraasAktiv_Rg', 24, 33.6),
-  H6_REGULAR: createFontStyle('MeraasAktiv_Rg', 22, 30.8),
-  H7_REGULAR: createFontStyle('MeraasAktiv_Rg', 20, 28),
-  H8_REGULAR: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
+  [FontStyle.H1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 40, 56),
+  [FontStyle.H2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 36, 50.4),
+  [FontStyle.H3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 32, 44.8),
+  [FontStyle.H4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 26, 36.4),
+  [FontStyle.H5_REGULAR]: createFontStyle('MeraasAktiv_Rg', 24, 33.6),
+  [FontStyle.H6_REGULAR]: createFontStyle('MeraasAktiv_Rg', 22, 30.8),
+  [FontStyle.H7_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
+  [FontStyle.H8_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
 
-  // Light headding styles
-  H1_LIGHT: createFontStyle('MeraasAktiv_Lt', 40, 56),
-  H2_LIGHT: createFontStyle('MeraasAktiv_Lt', 36, 50.4),
-  H3_LIGHT: createFontStyle('MeraasAktiv_Lt', 32, 44.8),
-  H4_LIGHT: createFontStyle('MeraasAktiv_Lt', 26, 36.4),
-  H5_LIGHT: createFontStyle('MeraasAktiv_Lt', 24, 33.6),
-  H6_LIGHT: createFontStyle('MeraasAktiv_Lt', 22, 30.8),
-  H7_LIGHT: createFontStyle('MeraasAktiv_Lt', 20, 28),
-  H8_LIGHT: createFontStyle('MeraasAktiv_Lt', 18, 25.2),
+  [FontStyle.H1_LIGHT]: createFontStyle('MeraasAktiv_Lt', 40, 56),
+  [FontStyle.H2_LIGHT]: createFontStyle('MeraasAktiv_Lt', 36, 50.4),
+  [FontStyle.H3_LIGHT]: createFontStyle('MeraasAktiv_Lt', 32, 44.8),
+  [FontStyle.H4_LIGHT]: createFontStyle('MeraasAktiv_Lt', 26, 36.4),
+  [FontStyle.H5_LIGHT]: createFontStyle('MeraasAktiv_Lt', 24, 33.6),
+  [FontStyle.H6_LIGHT]: createFontStyle('MeraasAktiv_Lt', 22, 30.8),
+  [FontStyle.H7_LIGHT]: createFontStyle('MeraasAktiv_Lt', 20, 28),
+  [FontStyle.H8_LIGHT]: createFontStyle('MeraasAktiv_Lt', 18, 25.2),
 
-  // Bold body styles
-  B1_BOLD: createFontStyle('MeraasAktiv_Bd', 20, 28),
-  B2_BOLD: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
-  B3_BOLD: createFontStyle('MeraasAktiv_Bd', 16, 22.4),
-  B4_BOLD: createFontStyle('MeraasAktiv_Bd', 14, 22.4),
+  [FontStyle.B1_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
+  [FontStyle.B2_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
+  [FontStyle.B3_BOLD]: createFontStyle('MeraasAktiv_Bd', 16, 22.4),
+  [FontStyle.B4_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 22.4),
 
-  // Regular body styles
-  B1_REGULAR: createFontStyle('MeraasAktiv_Rg', 20, 28),
-  B2_REGULAR: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
-  B3_REGULAR: createFontStyle('MeraasAktiv_Rg', 16, 22.4),
-  B4_REGULAR: createFontStyle('MeraasAktiv_Rg', 14, 22.4),
+  [FontStyle.B1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
+  [FontStyle.B2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
+  [FontStyle.B3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 16, 22.4),
+  [FontStyle.B4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 22.4),
 
-  // Bold Label styles
-  L1_BOLD: createFontStyle('MeraasAktiv_Bd', 14, 19.6),
-  L2_BOLD: createFontStyle('MeraasAktiv_Bd', 12, 16.8),
-  L3_BOLD: createFontStyle('MeraasAktiv_Bd', 10, 14),
+  [FontStyle.L1_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 19.6),
+  [FontStyle.L2_BOLD]: createFontStyle('MeraasAktiv_Bd', 12, 16.8),
+  [FontStyle.L3_BOLD]: createFontStyle('MeraasAktiv_Bd', 10, 14),
 
-  // Regular Label styles
-  L1_REGULAR: createFontStyle('MeraasAktiv_Rg', 14, 19.6),
-  L2_REGULAR: createFontStyle('MeraasAktiv_Rg', 12, 16.8),
-  L3_REGULAR: createFontStyle('MeraasAktiv_Rg', 10, 14),
+  [FontStyle.L1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 19.6),
+  [FontStyle.L2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 12, 16.8),
+  [FontStyle.L3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 10, 14),
 };

package/src/theme/themes.ts

@@ -1,89 +1,92 @@
+import {Theme} from '../utils/appEnum';
+
 const theme = {
-  SURFACE_PRIMARY: {
+  [Theme.SURFACE_PRIMARY]: {
     light: '#FFFFFF',
     dark: '#404040',
   },
-  SURFACE_SECONDARY: {
+  [Theme.SURFACE_SECONDARY]: {
     light: '#F5F5F5',
     dark: '#212121',
   },
-  SURFACE_STATIC: {
+  [Theme.SURFACE_STATIC]: {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
-  SURFACE_BRAND_STATIC: {
+  [Theme.SURFACE_BRAND_STATIC]: {
     light: '#D92D27',
     dark: '#D92D27',
   },
-  SURFACE_BRAND_TRANSPARENT_STATIC: {
+  [Theme.SURFACE_BRAND_TRANSPARENT_STATIC]: {
     light: '#D92D3E',
     dark: '#D92D3E',
   },
-  SURFACE_DISABLE: {
+  [Theme.SURFACE_DISABLE]: {
     light: '#E1E1E1',
     dark: '#A7A7A7',
   },
-  SURFACE_INVERTED_TRANSPARENT: {
+  [Theme.SURFACE_INVERTED_TRANSPARENT]: {
     light: '#686868',
     dark: '#FFFFFF',
   },
 
-  CONTENT_PRIMARY: {
+  [Theme.CONTENT_PRIMARY]: {
     light: '#000000',
     dark: '#FFFFFF',
   },
-  CONTENT_SECONDRY: {
+  [Theme.CONTENT_SECONDRY]: {
     light: '#686868',
     dark: '#A7A7A7',
   },
-  CONTENT_DISABLE: {
+  [Theme.CONTENT_DISABLE]: {
     light: '#A7A7A7',
     dark: '#686868',
   },
-  CONTENT_INVERTED: {
+  [Theme.CONTENT_INVERTED]: {
     light: '#FFFFFF',
     dark: '#000000',
   },
-  CONTENT_STATIC: {
+  [Theme.CONTENT_STATIC]: {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
-  CONTENT_SECONDRY_STATIC: {
+  [Theme.CONTENT_SECONDRY_STATIC]: {
     light: '#CECECE',
     dark: '#CECECE',
   },
 
-  BORDER_PRIMARY: {
+  [Theme.BORDER_PRIMARY]: {
     light: '#686868',
     dark: '#404040',
   },
-  BORDER_SECONDRY: {
+  [Theme.BORDER_SECONDRY]: {
     light: '#A7A7A7',
     dark: '#686868',
   },
-  BORDER_DISABLE: {
+  [Theme.BORDER_DISABLE]: {
     light: '#CECECE',
     dark: '#4F4F4F',
   },
-  BORDER_INVERTED: {
+  [Theme.BORDER_INVERTED]: {
     light: '#000000',
     dark: '#FFFFFF',
   },
-  BORDER_BRAND_STATIC: {
+  [Theme.BORDER_BRAND_STATIC]: {
     light: '#D92D27',
     dark: '#D92D27',
   },
-  BORDER_BRAND_TRANSPARENT_STATIC: {
+  [Theme.BORDER_BRAND_TRANSPARENT_STATIC]: {
     light: '#D92D3E',
     dark: '#D92D3E',
   },
-  BORDER_STATIC: {
+  [Theme.BORDER_STATIC]: {
     light: '#FFFFFF',
     dark: '#FFFFFF',
   },
-  BORDER_SEPRATOR: {
+  [Theme.BORDER_SEPRATOR]: {
     light: '#282828',
     dark: '#FFFFFF',
   },
 };
+
 export default theme;

package/src/utils/appEnum.ts

@@ -15,3 +15,84 @@ export enum ToggleTextType {
   ON = 'ON',
   OFF = 'OFF',
 }
+
+export enum FontStyle {
+  // Bold heading styles
+  H1_BOLD = 'H1_BOLD',
+  H2_BOLD = 'H2_BOLD',
+  H3_BOLD = 'H3_BOLD',
+  H4_BOLD = 'H4_BOLD',
+  H5_BOLD = 'H5_BOLD',
+  H6_BOLD = 'H6_BOLD',
+  H7_BOLD = 'H7_BOLD',
+  H8_BOLD = 'H8_BOLD',
+
+  // Regular heading styles
+  H1_REGULAR = 'H1_REGULAR',
+  H2_REGULAR = 'H2_REGULAR',
+  H3_REGULAR = 'H3_REGULAR',
+  H4_REGULAR = 'H4_REGULAR',
+  H5_REGULAR = 'H5_REGULAR',
+  H6_REGULAR = 'H6_REGULAR',
+  H7_REGULAR = 'H7_REGULAR',
+  H8_REGULAR = 'H8_REGULAR',
+
+  // Light heading styles
+  H1_LIGHT = 'H1_LIGHT',
+  H2_LIGHT = 'H2_LIGHT',
+  H3_LIGHT = 'H3_LIGHT',
+  H4_LIGHT = 'H4_LIGHT',
+  H5_LIGHT = 'H5_LIGHT',
+  H6_LIGHT = 'H6_LIGHT',
+  H7_LIGHT = 'H7_LIGHT',
+  H8_LIGHT = 'H8_LIGHT',
+
+  // Bold body styles
+  B1_BOLD = 'B1_BOLD',
+  B2_BOLD = 'B2_BOLD',
+  B3_BOLD = 'B3_BOLD',
+  B4_BOLD = 'B4_BOLD',
+
+  // Regular body styles
+  B1_REGULAR = 'B1_REGULAR',
+  B2_REGULAR = 'B2_REGULAR',
+  B3_REGULAR = 'B3_REGULAR',
+  B4_REGULAR = 'B4_REGULAR',
+
+  // Bold label styles
+  L1_BOLD = 'L1_BOLD',
+  L2_BOLD = 'L2_BOLD',
+  L3_BOLD = 'L3_BOLD',
+
+  // Regular label styles
+  L1_REGULAR = 'L1_REGULAR',
+  L2_REGULAR = 'L2_REGULAR',
+  L3_REGULAR = 'L3_REGULAR',
+}
+
+// ThemeKeys.ts
+export enum Theme {
+  SURFACE_PRIMARY = 'SURFACE_PRIMARY',
+  SURFACE_SECONDARY = 'SURFACE_SECONDARY',
+  SURFACE_STATIC = 'SURFACE_STATIC',
+  SURFACE_BRAND_STATIC = 'SURFACE_BRAND_STATIC',
+  SURFACE_BRAND_TRANSPARENT_STATIC = 'SURFACE_BRAND_TRANSPARENT_STATIC',
+  SURFACE_DISABLE = 'SURFACE_DISABLE',
+  SURFACE_INVERTED_TRANSPARENT = 'SURFACE_INVERTED_TRANSPARENT',
+
+  CONTENT_PRIMARY = 'CONTENT_PRIMARY',
+  CONTENT_SECONDRY = 'CONTENT_SECONDRY',
+  CONTENT_DISABLE = 'CONTENT_DISABLE',
+  CONTENT_INVERTED = 'CONTENT_INVERTED',
+  CONTENT_STATIC = 'CONTENT_STATIC',
+  CONTENT_SECONDRY_STATIC = 'CONTENT_SECONDRY_STATIC',
+
+  BORDER_PRIMARY = 'BORDER_PRIMARY',
+  BORDER_SECONDRY = 'BORDER_SECONDRY',
+  BORDER_DISABLE = 'BORDER_DISABLE',
+  BORDER_INVERTED = 'BORDER_INVERTED',
+  BORDER_BRAND_STATIC = 'BORDER_BRAND_STATIC',
+  BORDER_BRAND_TRANSPARENT_STATIC = 'BORDER_BRAND_TRANSPARENT_STATIC',
+  BORDER_STATIC = 'BORDER_STATIC',
+  BORDER_SEPRATOR = 'BORDER_SEPRATOR',
+}