dhre-ui-kit 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -27,8 +27,8 @@
     "react": "18.2.0",
     "react-native": "0.74.3",
     "react-native-blob-util": "^0.19.11",
-    "react-native-otp-verify": "^1.1.8",
     "react-native-gesture-handler": "2.17.0",
+    "react-native-otp-verify": "^1.1.8",
     "react-native-pdf": "^6.7.5",
     "react-native-progress": "^5.0.1",
     "react-native-svg": "^15.4.0",
@@ -38,8 +38,8 @@
     "rn-tooltip": "^3.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
     "@babel/runtime": "^7.20.0",
     "@eslint/js": "^9.7.0",
     "@react-native/babel-preset": "0.74.85",

package/src/components/badge/Badge.test.tsx

@@ -1,8 +1,17 @@
 import React from 'react';
 import {render, screen} from '@testing-library/react-native';
 import Badge from './Badge';
+import {useSelector} from 'react-redux';
+
+// Mock the useSelector hook
 
 describe('Badge component', () => {
+  beforeEach(() => {
+    (useSelector as unknown as jest.Mock).mockImplementation(() => {
+      return 'light';
+    });
+  });
+
   it('renders text correctly', () => {
     const text = 'Test Badge';
     render(
@@ -26,6 +35,7 @@ describe('Badge component', () => {
         }}
       />,
     );
+    // Your assertions here
   });
 
   it('renders with custom style', () => {
@@ -41,5 +51,7 @@ describe('Badge component', () => {
 
     const badge = screen.getByTestId('BADGE');
     expect(badge).toBeDefined();
+    // You can also check if the custom style is applied correctly
+    expect(badge.props.style).toContainEqual(customStyle);
   });
 });

package/src/components/badge/Badge.tsx

@@ -4,6 +4,7 @@ import commonStyles from '../../utils/commonStyles';
 import styles from './Badge.styles';
 import {SvgProps} from 'react-native-svg';
 import CustomTypography from '../customTypography/CustomTypography';
+import {withThemeProvider} from '../../theme/withThemeProvider';
 
 interface BadgeProps {
   text?: string;
@@ -44,4 +45,4 @@ const Badge: React.FC<BadgeProps> = ({
   );
 };
 
-export default Badge;
+export default withThemeProvider(Badge);

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

@@ -15,6 +15,4 @@ export interface ButtonProps {
   titleShown?: boolean;
   variant: keyof typeof FONT_STYLES | string;
   iconName?: ReactElement<SvgProps>;
-  containerStyle?:ViewStyle;
-  buttonContainerColor?:string
 }

package/src/components/button/Button.tsx

@@ -5,8 +5,6 @@ import {BUTTON_TYPES} from '../../utils/constants';
 import {ButtonProps} from './Button.interface';
 import {DHRE_COLORS_TEXT} from '../../theme/colors';
 import CustomTypography from '../customTypography/CustomTypography';
-import { useTheme } from '../../theme/ThemeContext';
-import { withThemeProvider } from '../../theme/withThemeProvider';
 
 const Button: React.FC<ButtonProps> = ({
   onPress,
@@ -20,11 +18,8 @@ const Button: React.FC<ButtonProps> = ({
   titleShown = true,
   iconShown = false,
   iconName,
-  buttonContainerColor='SURFACE_PRIMARY',
 }) => {
-  const { theme } = useTheme();
-  console.log(theme[buttonContainerColor],)
-  const buttonStyles = [styles.button, styles[buttonType], buttonStyle,{backgroundColor:theme[buttonContainerColor]}];
+  const buttonStyles = [styles.button, styles[buttonType], buttonStyle];
   const textStyle = [styles[buttonType + BUTTON_TYPES.TEXT], titleStyle];
   const iconStyle = [styles.iconStyle, iconStyles];
 
@@ -54,5 +49,5 @@ const Button: React.FC<ButtonProps> = ({
     </View>
   );
 };
-export default withThemeProvider(Button);
 
+export default Button;

package/src/components/customText/CustomText.tsx

@@ -9,17 +9,17 @@ interface CustomTextProps extends TextProps {
   text: string;
   variant: keyof typeof FONT_STYLES | string;
   style?: TextStyle;
-  textColor?:string
+  textColor?: string;
 }
 
 const CustomText: React.FC<CustomTextProps> = ({
   text,
   style,
   variant,
-  textColor='SURFACE_STATIC',
+  textColor = 'SURFACE_STATIC',
   ...props
 }) => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
   return (
     <CustomTypography
       variant={variant}

package/src/theme/ThemeContext.tsx

@@ -1,5 +1,4 @@
 import React, {createContext, useContext, ReactNode} from 'react';
-
 import {useSelector} from 'react-redux';
 import theme from './themes';
 
@@ -13,9 +12,10 @@ interface ThemeProviderProps {
   children: ReactNode;
 }
 
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-    // const mode = useSelector((state: any) => state.theme.theme);
-    const mode = 'light'
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mode = useSelector((state: any) => state.theme.currentTheme);
+  // const mode = 'light'
   // Filter the theme based on the mode (light or dark)
   const filteredTheme = Object.keys(theme).reduce((acc, key) => {
     acc[key] = theme[key][mode];
@@ -23,12 +23,12 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   }, {} as Record<string, string>);
 
   return (
-    <ThemeContext.Provider value={{ theme: filteredTheme }}>
+    <ThemeContext.Provider value={{theme: filteredTheme}}>
       {children}
     </ThemeContext.Provider>
   );
 };
- 
+
 export const useTheme = (): ThemeContextType => {
   const context = useContext(ThemeContext);
   if (context === undefined) {

package/src/theme/fonts.ts

@@ -15,6 +15,14 @@ const createFontStyle = (
   fontFamily,
 });
 
+export const meraasActivFontfamily: TextStyle = {
+  fontFamily: 'MeraasAktiv_Rg'
+}
+
+export const serifActivFontfamily: TextStyle = {
+  fontFamily: 'PT Serif'
+}
+
 export const FONT_STYLES: FontStyles = {
   // Bold headding styles
   H1_BOLD: createFontStyle('MeraasAktiv_Bd', 40, 56),