dhre-ui-kit 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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-blob-util": "^0.19.11",
     "react-native-otp-verify": "^1.1.8",
-    "react-native-pdf": "^6.7.1",
     "react-native-gesture-handler": "2.17.0",
+    "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",

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

@@ -15,4 +15,6 @@ 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,6 +5,8 @@ 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,
@@ -18,8 +20,11 @@ const Button: React.FC<ButtonProps> = ({
   titleShown = true,
   iconShown = false,
   iconName,
+  buttonContainerColor='SURFACE_PRIMARY',
 }) => {
-  const buttonStyles = [styles.button, styles[buttonType], buttonStyle];
+  const { theme } = useTheme();
+  console.log(theme[buttonContainerColor],)
+  const buttonStyles = [styles.button, styles[buttonType], buttonStyle,{backgroundColor:theme[buttonContainerColor]}];
   const textStyle = [styles[buttonType + BUTTON_TYPES.TEXT], titleStyle];
   const iconStyle = [styles.iconStyle, iconStyles];
 
@@ -49,5 +54,5 @@ const Button: React.FC<ButtonProps> = ({
     </View>
   );
 };
+export default withThemeProvider(Button);
 
-export default Button;

package/src/components/customText/CustomText.tsx

@@ -9,20 +9,22 @@ 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();
+  const { theme } = useTheme();
   return (
     <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,10 @@
 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);
@@ -12,17 +13,22 @@ interface ThemeProviderProps {
   children: ReactNode;
 }
 
-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;
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+    // const mode = useSelector((state: any) => state.theme.theme);
+    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>
   );
 };
-
+ 
 export const useTheme = (): ThemeContextType => {
   const context = useContext(ThemeContext);
   if (context === undefined) {

package/src/theme/fonts.ts

@@ -1,303 +1,70 @@
 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 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;