dhre-ui-kit 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -26,9 +26,10 @@
     "lint-staged": "^15.2.7",
     "react": "18.2.0",
     "react-native": "0.74.3",
-    "react-native-otp-verify": "^1.1.8",
-    "react-native-pdf": "^6.7.1",
+    "react-native-blob-util": "^0.19.11",
     "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",
     "react-native-svg-transformer": "^1.5.0",
@@ -37,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/customText/CustomText.tsx

@@ -9,12 +9,14 @@ interface CustomTextProps extends TextProps {
   text: string;
   variant: keyof typeof FONT_STYLES | string;
   style?: TextStyle;
+  textColor?: string;
 }
 
 const CustomText: React.FC<CustomTextProps> = ({
   text,
   style,
   variant,
+  textColor = 'SURFACE_STATIC',
   ...props
 }) => {
   const {theme} = useTheme();
@@ -22,7 +24,7 @@ const CustomText: React.FC<CustomTextProps> = ({
     <CustomTypography
       variant={variant}
       text={text || ''}
-      style={[{color: theme.colors.text}, style]}
+      style={[{color: theme[textColor]}, style]}
       {...props}
     />
   );

package/src/index.ts

@@ -9,7 +9,7 @@ export {default as CustomDropdown} from './components/customDropdown';
 export {default as CustomTextInput} from './components/customInputText';
 export {default as CustomTooltip} from './components/customTooltip';
 export {default as FileUpload} from './components/fileUpload';
-// export {default as PdfView} from './components/pdfView'; //TODO:  error
+export {default as PdfView} from './components/pdfView';
 export {default as PopUp} from './components/popup';
 export {default as CustomProgressBar} from './components/progressBar';
 export {default as Property360View} from './components/property360View';

package/src/theme/ThemeContext.tsx

@@ -1,9 +1,9 @@
 import React, {createContext, useContext, ReactNode} from 'react';
-import {lightTheme, darkTheme} from './themes';
 import {useSelector} from 'react-redux';
+import theme from './themes';
 
 interface ThemeContextType {
-  theme: typeof lightTheme | typeof darkTheme;
+  theme: Record<string, string>;
 }
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
@@ -14,12 +14,18 @@ interface ThemeProviderProps {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const theme = useSelector((state: any) => state.theme.theme);
-  //TODO: please comment line no 16 and uncomment 18 to run
-  // const theme = false ? darkTheme : lightTheme;
+  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];
+    return acc;
+  }, {} as Record<string, string>);
 
   return (
-    <ThemeContext.Provider value={{theme}}>{children}</ThemeContext.Provider>
+    <ThemeContext.Provider value={{theme: filteredTheme}}>
+      {children}
+    </ThemeContext.Provider>
   );
 };
 

package/src/theme/fonts.ts

@@ -1,303 +1,78 @@
 import {TextStyle} from 'react-native';
 import {moderateScale, verticalScale} from '../utils/stylehelper';
 
-const boldWeight = '700';
-const semiboldWeight = '600';
-const mediumWeight = '500';
-const regularWeight = '400';
 interface FontStyles {
   [key: string]: TextStyle;
 }
 
+const createFontStyle = (
+  fontFamily: string,
+  fontSize: number,
+  lineHeight: number,
+): TextStyle => ({
+  fontSize: moderateScale(fontSize),
+  lineHeight: verticalScale(lineHeight),
+  fontFamily,
+});
+
+export const meraasActivFontfamily: TextStyle = {
+  fontFamily: 'MeraasAktiv_Rg'
+}
+
+export const serifActivFontfamily: TextStyle = {
+  fontFamily: 'PT Serif'
+}
+
 export const FONT_STYLES: FontStyles = {
-  // Heading Fonts
-  H1bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(36),
-    lineHeight: verticalScale(44),
-  } as TextStyle,
-  H1semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(36),
-    lineHeight: verticalScale(44),
-  } as TextStyle,
-  H1medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(36),
-    lineHeight: verticalScale(44),
-  } as TextStyle,
-  H2bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(32),
-    lineHeight: verticalScale(40),
-  } as TextStyle,
-  H2semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(32),
-    lineHeight: verticalScale(40),
-  } as TextStyle,
-  H2medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(32),
-    lineHeight: verticalScale(40),
-  } as TextStyle,
-  H3bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(28),
-    lineHeight: verticalScale(36),
-  } as TextStyle,
-  H3semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(28),
-    lineHeight: verticalScale(36),
-  } as TextStyle,
-  H3medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(28),
-    lineHeight: verticalScale(36),
-  } as TextStyle,
-  H4bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(24),
-    lineHeight: verticalScale(32),
-  } as TextStyle,
-  H4semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(24),
-    lineHeight: verticalScale(32),
-  } as TextStyle,
-  H4medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(24),
-    lineHeight: verticalScale(32),
-  } as TextStyle,
-  H5bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(20),
-    lineHeight: verticalScale(28),
-  } as TextStyle,
-  H5semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(20),
-    lineHeight: verticalScale(28),
-  } as TextStyle,
-  H5medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(20),
-    lineHeight: verticalScale(28),
-  } as TextStyle,
-  H6bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(18),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  H6semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(18),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  H6medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(18),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  H7bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(16),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  H7semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(16),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  H7medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(16),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  H8bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(14),
-    lineHeight: verticalScale(22),
-  } as TextStyle,
-  H8semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(14),
-    lineHeight: verticalScale(22),
-  } as TextStyle,
-  H8medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(14),
-    lineHeight: verticalScale(22),
-  } as TextStyle,
-  H9bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(12),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  H9semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(12),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  H9medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(12),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
+  // 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),
+
+  // 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),
+
+  // 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),
+
+  // 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),
+
+  // 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),
 
-  // Paragraph Fonts
-  P1regular: {
-    fontWeight: regularWeight,
-    fontSize: moderateScale(18),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  P1semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(18),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  P1medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(18),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  P2regular: {
-    fontWeight: regularWeight,
-    fontSize: moderateScale(16),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  P2semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(16),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  P2medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(16),
-    lineHeight: verticalScale(24),
-  } as TextStyle,
-  P3regular: {
-    fontWeight: regularWeight,
-    fontSize: moderateScale(14),
-    lineHeight: verticalScale(22),
-  } as TextStyle,
-  P3semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(14),
-    lineHeight: verticalScale(22),
-  } as TextStyle,
-  P3medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(14),
-    lineHeight: verticalScale(22),
-  } as TextStyle,
-  P4regular: {
-    fontWeight: regularWeight,
-    fontSize: moderateScale(12),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  P4semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(12),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  P4medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(12),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  P5bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(11),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  P5semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(11),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  P5medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(11),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
+  // 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),
 
-  // Button Fonts
-  B1bold: {
-    fontWeight: regularWeight,
-    fontSize: moderateScale(16),
-    lineHeight: verticalScale(20),
-  } as TextStyle,
-  B1semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(16),
-    lineHeight: verticalScale(20),
-  } as TextStyle,
-  B1medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(16),
-    lineHeight: verticalScale(20),
-  } as TextStyle,
-  B2bold: {
-    fontWeight: regularWeight,
-    fontSize: moderateScale(14),
-    lineHeight: verticalScale(20),
-  } as TextStyle,
-  B2semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(14),
-    lineHeight: verticalScale(20),
-  } as TextStyle,
-  B2medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(14),
-    lineHeight: verticalScale(20),
-  } as TextStyle,
-  B3bold: {
-    fontWeight: regularWeight,
-    fontSize: moderateScale(12),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  B3semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(12),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  B3medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(12),
-    lineHeight: verticalScale(16),
-  } as TextStyle,
-  B4bold: {
-    fontWeight: regularWeight,
-    fontSize: moderateScale(10),
-    lineHeight: verticalScale(12),
-  } as TextStyle,
-  B4semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(10),
-    lineHeight: verticalScale(12),
-  } as TextStyle,
-  B4medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(10),
-    lineHeight: verticalScale(12),
-  } as TextStyle,
-  B5bold: {
-    fontWeight: boldWeight,
-    fontSize: moderateScale(9),
-    lineHeight: verticalScale(12),
-  } as TextStyle,
-  B5semiBold: {
-    fontWeight: semiboldWeight,
-    fontSize: moderateScale(9),
-    lineHeight: verticalScale(12),
-  } as TextStyle,
-  B5medium: {
-    fontWeight: mediumWeight,
-    fontSize: moderateScale(9),
-    lineHeight: verticalScale(12),
-  } as TextStyle,
+  // 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),
 };

package/src/theme/themes.ts

@@ -1,20 +1,85 @@
-// themes.js
-const lightTheme = {
-  colors: {
-    background: '#ffffff',
-    text: '#000000',
-    primary: '#6200ee',
-    secondary: '#03dac6',
+const theme = {
+  SURFACE_PRIMARY: {
+    light: '#FFFFFF',
+    dark: '#404040',
+  },
+  SURFACE_SECONDARY: {
+    light: '#F5F5F5',
+    dark: '#212121',
+  },
+  SURFACE_STATIC: {
+    light: '#FFFFFF',
+    dark: '#FFFFFF',
+  },
+  SURFACE_BRAND_STATIC: {
+    light: '#D92D27',
+    dark: '#D92D27',
+  },
+  SURFACE_BRAND_TRANSPARENT_STATIC: {
+    light: '#D92D3E',
+    dark: '#D92D3E',
+  },
+  SURFACE_DISABLE: {
+    light: '#E1E1E1',
+    dark: '#A7A7A7',
+  },
+  SURFACE_INVERTED_TRANSPARENT: {
+    light: '#686868',
+    dark: '#FFFFFF',
   },
-};
 
-const darkTheme = {
-  colors: {
-    background: '#000000',
-    text: '#ffffff',
-    primary: '#bb86fc',
-    secondary: '#03dac6',
+  CONTENT_PRIMARY: {
+    light: '#000000',
+    dark: '#FFFFFF',
+  },
+  CONTENT_SECONDRY: {
+    light: '#686868',
+    dark: '#A7A7A7',
+  },
+  CONTENT_DISABLE: {
+    light: '#A7A7A7',
+    dark: '#686868',
+  },
+  CONTENT_INVERTED: {
+    light: '#FFFFFF',
+    dark: '#000000',
+  },
+  CONTENT_STATIC: {
+    light: '#FFFFFF',
+    dark: '#FFFFFF',
+  },
+  CONTENT_SECONDRY_STATIC: {
+    light: '#CECECE',
+    dark: '##CECECE',
   },
-};
 
-export {lightTheme, darkTheme};
+  BODER_PRIMARY: {
+    light: '#686868',
+    dark: '#404040',
+  },
+  BODER_SECONDRY: {
+    light: '#A7A7A7',
+    dark: '#686868',
+  },
+  BODER_DISABLE: {
+    light: '#CECECE',
+    dark: '#4F4F4F',
+  },
+  BODER_INVERTED: {
+    light: '#000000',
+    dark: '#FFFFFF',
+  },
+  BODER_BRAND_STATIC: {
+    light: '#D92D27',
+    dark: '#D92D27',
+  },
+  BODER_BRAND_TRANSPARENT_STATIC: {
+    light: '#D92D3E',
+    dark: '#D92D3E',
+  },
+  BODER_STATIC: {
+    light: '#FFFFFF',
+    dark: '#FFFFFF',
+  },
+};
+export default theme;