@teamnhz/rn-ui-toolkit 1.4.2 → 1.4.4

package/dist/components/Switch/index.js

@@ -1,43 +1,3 @@
-// import React, { useState } from "react";
-// import { View, Switch, StyleSheet } from "react-native";
-// import { Colors } from "../../styles";
-// // Switch component
-// const SwitchUI = ({
-//   isEnabled,
-//   onValueChange,
-// }: {
-//   isEnabled?: boolean;
-//   onValueChange?: (value: boolean) => void;
-// }) => {
-//   const [internalState, setInternalState] = useState(isEnabled ?? false);
-//   const toggleSwitch = () => {
-//     setInternalState((prev) => !prev);
-//     onValueChange && onValueChange(!internalState);
-//   };
-//   const value = isEnabled ?? internalState;
-//   return (
-//     <View
-//       style={[
-//         styles.container,
-//         { borderColor: value ? Colors.primaryColor : Colors.disabledGrey },
-//       ]}
-//     >
-//       <Switch
-//         trackColor={{ false: Colors.textGrey, true: Colors.appThemeColor }}
-//         style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
-//         thumbColor={value ? Colors.black : Colors.disabledGrey}
-//         onValueChange={toggleSwitch}
-//         value={value}
-//       />
-//     </View>
-//   );
-// };
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1,
-//   },
-// });
-// export default SwitchUI;
 import React, { useState } from "react";
 import { View, Switch, StyleSheet, } from "react-native";
 import { Colors } from "../../styles";
@@ -62,43 +22,3 @@ const styles = StyleSheet.create({
     },
 });
 export default SwitchUI;
-// import React, { useState } from "react";
-// import { View, Switch, StyleSheet } from "react-native";
-// import { Colors } from "../../styles";
-// // Switch component
-// const SwitchUI = ({
-//   isEnabled,
-//   onValueChange,
-// }: {
-//   isEnabled?: boolean;
-//   onValueChange?: (value: boolean) => void;
-// }) => {
-//   const [internalState, setInternalState] = useState(isEnabled ?? false);
-//   const toggleSwitch = () => {
-//     setInternalState((prev) => !prev);
-//     onValueChange && onValueChange(!internalState);
-//   };
-//   const value = isEnabled ?? internalState;
-//   return (
-//     <View
-//       style={[
-//         styles.container,
-//         { borderColor: value ? Colors.primaryColor : Colors.disabledGrey },
-//       ]}
-//     >
-//       <Switch
-//         trackColor={{ false: "grey", true: "green" }}
-//         style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
-//         thumbColor={value ? Colors.primaryColor : Colors.disabledGrey}
-//         onValueChange={toggleSwitch}
-//         value={value}
-//       />
-//     </View>
-//   );
-// };
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1,
-//   },
-// });
-// export default SwitchUI;

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
+export { Colors as TheameColor } from "../styles";
+export { setLanguage, setFontConfig, getFont } from '../styles/appConfig';
 export { default as Buttons } from "./Buttons";
 export { default as Container } from "./Container";
 export { default as Dividers } from "./Dividers";
@@ -28,3 +30,5 @@ export { default as DocumentPicker } from "./DocumentPicker";
 export { default as ImagePicker } from "./ImagePicker";
 export { default as AppHeader } from "./AppHeader";
 export { default as LinearGradientButton } from "./LinearGradientButton";
+export { default as Typography } from '../styles/typography';
+export { scale, verticalScale, moderateScale } from '../styles/scale';

package/dist/components/index.js

@@ -1,3 +1,5 @@
+export { Colors as TheameColor } from "../styles";
+export { setLanguage, setFontConfig, getFont } from '../styles/appConfig';
 export { default as Buttons } from "./Buttons";
 export { default as Container } from "./Container";
 export { default as Dividers } from "./Dividers";
@@ -28,3 +30,5 @@ export { default as DocumentPicker } from "./DocumentPicker";
 export { default as ImagePicker } from "./ImagePicker";
 export { default as AppHeader } from "./AppHeader";
 export { default as LinearGradientButton } from "./LinearGradientButton";
+export { default as Typography } from '../styles/typography';
+export { scale, verticalScale, moderateScale } from '../styles/scale';

package/dist/styles/appConfig.d.ts

@@ -0,0 +1,4 @@
+export declare const setLanguage: (lang: any) => void;
+export declare const getLanguage: () => string;
+export declare const setFontConfig: (lang: any, weights?: {}) => void;
+export declare const getFont: (lang: any, weight: any) => any;

package/dist/styles/appConfig.js

@@ -0,0 +1,94 @@
+// import { setColorConfig } from "./colors";
+// import { setTypographyConfig } from "./typography";
+// export type AppConfig = {
+//   colors?: Record<string, string>;
+//   fonts?: any;
+//   sizes?: any;
+//   lang?: any;
+//   scaleFn?: any;
+// };
+// export function setAppConfig(config: AppConfig) {
+//   if (config.colors) setColorConfig(config.colors);
+//   setTypographyConfig({
+//     fonts: config.fonts,
+//     sizes: config.sizes,
+//     lang: config.lang,
+//     scaleFn: config.scaleFn,
+//   });
+// }
+// appConfig.js
+let appLanguage = "en"; // en | hi
+let customFonts = {
+    en: {
+        thin: null,
+        extraLight: null,
+        light: null,
+        regular: null,
+        medium: null,
+        semiBold: null,
+        bold: null,
+        extraBold: null,
+        black: null,
+    },
+    hi: {
+        thin: null,
+        extraLight: null,
+        light: null,
+        regular: null,
+        medium: null,
+        semiBold: null,
+        bold: null,
+        extraBold: null,
+        black: null,
+    },
+};
+// -----------------------------------------------------
+// DEFAULT MONTSERRAT FONTS (ALL WEIGHTS)
+// -----------------------------------------------------
+const DEFAULT_FONTS = {
+    en: {
+        thin: "Montserrat-Thin",
+        extraLight: "Montserrat-ExtraLight",
+        light: "Montserrat-Light",
+        regular: "Montserrat-Regular",
+        medium: "Montserrat-Medium",
+        semiBold: "Montserrat-SemiBold",
+        bold: "Montserrat-Bold",
+        extraBold: "Montserrat-ExtraBold",
+        black: "Montserrat-Black",
+    },
+    hi: {
+        thin: "Montserrat-Thin",
+        extraLight: "Montserrat-ExtraLight",
+        light: "Montserrat-Light",
+        regular: "Montserrat-Regular",
+        medium: "Montserrat-Medium",
+        semiBold: "Montserrat-SemiBold",
+        bold: "Montserrat-Bold",
+        extraBold: "Montserrat-ExtraBold",
+        black: "Montserrat-Black",
+    },
+};
+// -----------------------------------------------------
+// LANGUAGE CONTROL
+// -----------------------------------------------------
+export const setLanguage = (lang) => {
+    appLanguage = lang === "hi" ? "hi" : "en";
+};
+export const getLanguage = () => appLanguage;
+// -----------------------------------------------------
+// SET CUSTOM FONT (USER CAN OVERRIDE)
+// -----------------------------------------------------
+export const setFontConfig = (lang, weights = {}) => {
+    if (!customFonts[lang])
+        return;
+    Object.keys(customFonts[lang]).forEach((k) => {
+        customFonts[lang][k] = weights[k] || null;
+    });
+};
+// -----------------------------------------------------
+// GET FONT
+// -----------------------------------------------------
+export const getFont = (lang, weight) => {
+    return customFonts?.[lang]?.[weight] || DEFAULT_FONTS?.[lang]?.[weight];
+};

package/dist/styles/colors.js

@@ -30,3 +30,50 @@ export default {
     checkedColor: "#40BFFF",
     appThemeColor: "#017F84",
 };
+// src/styles/colors.ts
+// export type ColorMap = {
+//   [key: string]: string;
+// };
+// const DEFAULT_COLORS: ColorMap = {
+//   background: "#ffffff",
+//   white: "white",
+//   primaryColor: "#40BFFF",
+//   darkBlue: "#062845",
+//   linkColor: "#2e96f2",
+//   textColor: "#223263",
+//   textGrey: "#9098B1",
+//   textLink: "#40BFFF",
+//   textDanger: "#FB7181",
+//   disabledGrey: "#d3d3d3",
+//   dropOptionGrey: "#FAFAFA",
+//   lightGrey: "#F4F4F4",
+//   dividerColor: "#f5f5f5",
+//   dangerRed: "red",
+//   iconGrey: "#7e7e7e",
+//   mediumGrey: "#dcdcdc",
+//   black: "#000000",
+//   productDetailCardColor: "#FDFDFD",
+//   starGold: "#F0B000",
+//   verticalLineColor: "#D8D8D8",
+//   borderGrey: "#EAEAEA",
+//   brandGreyColor: "#808080",
+//   videoPlayerbackground: "#323232",
+//   visibleColor: "#9A9A9A",
+//   primaryPurple: "#E6E6FA",
+//   lightPurple: "#F3EDFD",
+//   extraLightPurple: "#f8f5fc",
+//   lightGreen: "#68c25d",
+//   checkedColor: "#40BFFF",
+//   appThemeColor: "#017F84",
+// };
+// // internal mutable state
+// let _colors = { ...DEFAULT_COLORS };
+// export function setColorConfig(colors: Partial<ColorMap>) {
+//   _colors = { ..._colors, ...colors };
+// }
+// export function getColors(): ColorMap {
+//   return JSON.parse(JSON.stringify(_colors));
+// }
+// export const Colors = new Proxy(_colors, {
+//   get: (_, prop: string) => _colors[prop],
+// });

package/dist/styles/images.d.ts

@@ -7,5 +7,6 @@ declare const _default: {
     video_icon: any;
     ic_calendar: any;
     ic_time: any;
+    down_arrow: any;
 };
 export default _default;

package/dist/styles/images.js

@@ -7,6 +7,7 @@ import video_icon from '../assets/images/video_icon.png';
 import cancel from '../assets/images/cancel.png';
 import ic_calendar from '../assets/images/ic_calendar.png';
 import ic_time from '../assets/images/ic_time.png';
+import down_arrow from '../assets/images/downArrow.png';
 export default {
     GoogleIcon,
     Eyeoff,
@@ -15,5 +16,6 @@ export default {
     cancel,
     video_icon,
     ic_calendar,
-    ic_time
+    ic_time,
+    down_arrow
 };

package/dist/styles/index.js

@@ -1,4 +1,5 @@
 import { createIconSetFromFontello } from 'react-native-vector-icons';
+// import { Colors } from './colors';
 import Colors from './colors';
 import Images from './images';
 import * as Scale from './scale';

package/dist/styles/typography.d.ts

@@ -16,74 +16,95 @@ declare const _default: {
             fontSize: number;
         };
     };
+    weights: {
+        thin: () => {
+            fontFamily: any;
+        };
+        extraLight: () => {
+            fontFamily: any;
+        };
+        lightU: () => {
+            fontFamily: any;
+        };
+        normalU: () => {
+            fontFamily: any;
+        };
+        mediumW: () => {
+            fontFamily: any;
+        };
+        semiBold: () => {
+            fontFamily: any;
+        };
+        boldU: () => {
+            fontFamily: any;
+        };
+        extraBold: () => {
+            fontFamily: any;
+        };
+        black: () => {
+            fontFamily: any;
+        };
+    };
     style: {
         header1: () => {
-            fontFamily: string;
+            fontFamily: any;
             fontSize: number;
         };
         header2: () => {
-            fontFamily: string;
+            fontFamily: any;
             fontSize: number;
         };
         header3: () => {
-            fontFamily: string;
-            fontSize: number;
-        };
-        header3Bold: () => {
-            fontFamily: string;
+            fontFamily: any;
             fontSize: number;
         };
         standardU: () => {
-            fontFamily: string;
-            fontSize: number;
-        };
-        standardLight: () => {
-            fontFamily: string;
+            fontFamily: any;
             fontSize: number;
         };
         standardBold: () => {
-            fontFamily: string;
+            fontFamily: any;
             fontSize: number;
         };
-        subTextU: () => {
-            fontFamily: string;
-            fontSize: number;
-        };
-        subTextBold: () => {
-            fontFamily: string;
-            fontSize: number;
-        };
-        subTextLight: () => {
-            fontFamily: string;
+        standardLight: () => {
+            fontFamily: any;
             fontSize: number;
         };
         smallTextU: () => {
-            fontFamily: string;
+            fontFamily: any;
             fontSize: number;
         };
         smallTextBold: () => {
-            fontFamily: string;
+            fontFamily: any;
             fontSize: number;
         };
         smallTextLight: () => {
-            fontFamily: string;
+            fontFamily: any;
             fontSize: number;
         };
-    };
-    weights: {
-        lightU: () => {
-            fontFamily: string;
+        subTextU: () => {
+            fontFamily: any;
+            fontSize: number;
         };
-        boldU: () => {
-            fontFamily: string;
+        subTextBold: () => {
+            fontFamily: any;
+            fontSize: number;
         };
-        normalU: () => {
-            fontFamily: string;
+        subTextLight: () => {
+            fontFamily: any;
+            fontSize: number;
         };
     };
     fonts: {
-        en: string;
-        ar: string;
+        thin: any;
+        extraLight: any;
+        light: any;
+        regular: any;
+        medium: any;
+        semiBold: any;
+        bold: any;
+        extraBold: any;
+        black: any;
     };
 };
 export default _default;