@teamnhz/rn-ui-toolkit 1.0.0

package/dist/styles/mixins.d.ts

@@ -0,0 +1,64 @@
+import { ViewStyle } from 'react-native';
+declare const styles: {
+    columnCenter: {
+        flexDirection: "column";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    columnCenterAlignStart: {
+        flexDirection: "column";
+        justifyContent: "center";
+        alignItems: "flex-start";
+    };
+    columnBetweenAlignTop: {
+        flexDirection: "column";
+        justifyContent: "space-between";
+        alignItems: "flex-start";
+    };
+    columnBetweenAlignEnd: {
+        flexDirection: "column";
+        justifyContent: "space-between";
+        alignItems: "flex-end";
+    };
+    rowCenter: {
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    rowStart: {
+        flexDirection: "row";
+        justifyContent: "flex-start";
+        alignItems: "center";
+    };
+    rowBetween: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+    };
+    rowAroundAlignBase: {
+        flexDirection: "row";
+        justifyContent: "space-around";
+        alignItems: "baseline";
+    };
+    rowBetweenAlignBase: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "baseline";
+    };
+    rowBetweenAlignStart: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "flex-start";
+    };
+    indicator: {
+        alignItems: "center";
+        justifyContent: "center";
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+};
+declare const circle: (size: number, color: string) => ViewStyle;
+export { styles, circle };

package/dist/styles/mixins.js

@@ -0,0 +1,68 @@
+import { StyleSheet } from 'react-native';
+const styles = StyleSheet.create({
+    columnCenter: {
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    columnCenterAlignStart: {
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+    },
+    columnBetweenAlignTop: {
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+    },
+    columnBetweenAlignEnd: {
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'flex-end',
+    },
+    rowCenter: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    rowStart: {
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+    },
+    rowBetween: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    rowAroundAlignBase: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'baseline',
+    },
+    rowBetweenAlignBase: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'baseline',
+    },
+    rowBetweenAlignStart: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+    },
+    indicator: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+const circle = (size, color) => ({
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    backgroundColor: color,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+});
+export { styles, circle };

package/dist/styles/scale.d.ts

@@ -0,0 +1,4 @@
+declare const scale: (size: number) => number;
+declare const verticalScale: (size: number) => number;
+declare const moderateScale: (size: number, factor?: number) => number;
+export { scale, verticalScale, moderateScale };

package/dist/styles/scale.js

@@ -0,0 +1,9 @@
+import { Dimensions } from 'react-native';
+const { width, height } = Dimensions.get('window');
+// Guideline sizes are based on standard ~5" screen mobile device
+const guidelineBaseWidth = 350;
+const guidelineBaseHeight = 680;
+const scale = (size) => (width / guidelineBaseWidth) * size;
+const verticalScale = (size) => (height / guidelineBaseHeight) * size;
+const moderateScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;
+export { scale, verticalScale, moderateScale };

package/dist/styles/typography.d.ts

@@ -0,0 +1,89 @@
+declare const _default: {
+    size: {
+        xSmall: () => {
+            fontSize: number;
+        };
+        smallU: () => {
+            fontSize: number;
+        };
+        regularU: () => {
+            fontSize: number;
+        };
+        mediumU: () => {
+            fontSize: number;
+        };
+        largeU: () => {
+            fontSize: number;
+        };
+    };
+    style: {
+        header1: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        header2: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        header3: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        header3Bold: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        standardU: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        standardLight: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        standardBold: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        subTextU: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        subTextBold: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        subTextLight: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        smallTextU: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        smallTextBold: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+        smallTextLight: () => {
+            fontFamily: string;
+            fontSize: number;
+        };
+    };
+    weights: {
+        lightU: () => {
+            fontFamily: string;
+        };
+        boldU: () => {
+            fontFamily: string;
+        };
+        normalU: () => {
+            fontFamily: string;
+        };
+    };
+    fonts: {
+        en: string;
+        ar: string;
+    };
+};
+export default _default;

package/dist/styles/typography.js

@@ -0,0 +1,123 @@
+import { I18nManager } from 'react-native';
+import { moderateScale } from './scale';
+// Usedo english font family
+const UE_FONT_LIGHT = 'Rubik-Light';
+const UE_FONT_REGULAR = 'Rubik-Regular';
+const UE_FONT_BOLD = 'Rubik-Bold';
+// Usedo arabic font family
+const UA_FONT_LIGHT = 'HelveticaNeueLTArabic-Light';
+const UA_FONT_REGULAR = 'HelveticaNeueLTArabic-Roman';
+const UA_FONT_BOLD = 'HelveticaNeueLTArabic-Bold';
+// sizes
+const xSmall = () => ({
+    fontSize: moderateScale(12),
+});
+const smallU = () => ({
+    fontSize: moderateScale(14),
+});
+const regularU = () => ({
+    fontSize: moderateScale(16),
+});
+const mediumU = () => ({
+    fontSize: moderateScale(18),
+});
+const largeU = () => ({
+    fontSize: moderateScale(20),
+});
+// weights
+const lightU = () => ({
+    fontFamily: I18nManager.isRTL ? UA_FONT_LIGHT : UE_FONT_LIGHT,
+});
+// comment for testing
+const normalU = () => ({
+    fontFamily: I18nManager.isRTL ? UA_FONT_REGULAR : UE_FONT_REGULAR,
+});
+const boldU = () => ({
+    fontFamily: I18nManager.isRTL ? UA_FONT_BOLD : UE_FONT_BOLD,
+});
+// styles
+const header1 = () => ({
+    ...largeU(), // 20
+    ...boldU(),
+});
+const header2 = () => ({
+    ...largeU(), // 20
+    ...normalU(),
+});
+const header3 = () => ({
+    ...mediumU(), // 18
+    ...normalU(),
+});
+const header3Bold = () => ({
+    ...mediumU(), // 18
+    ...boldU(),
+});
+const standardU = () => ({
+    ...regularU(), // 16
+    ...normalU(),
+});
+const standardLight = () => ({
+    ...regularU(), // 16
+    ...lightU(),
+});
+const standardBold = () => ({
+    ...regularU(), // 16
+    ...boldU(),
+});
+const subTextU = () => ({
+    ...smallU(), // 14
+    ...normalU(),
+});
+const subTextBold = () => ({
+    ...smallU(), // 14
+    ...boldU(),
+});
+const subTextLight = () => ({
+    ...smallU(), // 14
+    ...lightU(),
+});
+const smallTextU = () => ({
+    ...xSmall(), // 12
+    ...normalU(),
+});
+const smallTextBold = () => ({
+    ...xSmall(), // 12
+    ...boldU(),
+});
+const smallTextLight = () => ({
+    ...xSmall(), // 12
+    ...lightU(),
+});
+export default {
+    size: {
+        xSmall,
+        smallU,
+        regularU,
+        mediumU,
+        largeU,
+    },
+    style: {
+        header1,
+        header2,
+        header3,
+        header3Bold,
+        standardU,
+        standardLight,
+        standardBold,
+        subTextU,
+        subTextBold,
+        subTextLight,
+        smallTextU,
+        smallTextBold,
+        smallTextLight,
+    },
+    weights: {
+        lightU,
+        boldU,
+        normalU,
+    },
+    fonts: {
+        en: UE_FONT_REGULAR,
+        ar: UA_FONT_REGULAR,
+    },
+};

package/dist/utils/permissionMessage.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    CAMERA_PERMISSION_DENIED: string;
+    MICROPHONE_PERMISSION_DENIED: string;
+    GALLERY_PERMISSION_DENIED: string;
+    IMAGE_PROCESSING: string;
+    VIDEO_PROCESSING: string;
+    FILE_ERROR: string;
+    VIDEO_ERROR: string;
+    LIMIT_EXCEEDED: string;
+    USER_CANCELLED: string;
+    UNKNOWN_ERROR: string;
+};

package/dist/utils/permissionMessage.js

@@ -0,0 +1,12 @@
+export const messages = {
+    CAMERA_PERMISSION_DENIED: "Camera permission is required to use this feature.",
+    MICROPHONE_PERMISSION_DENIED: "Microphone permission is required for recording videos.",
+    GALLERY_PERMISSION_DENIED: "Gallery/Storage permission is required to select files.",
+    IMAGE_PROCESSING: "Processing image, please wait...",
+    VIDEO_PROCESSING: "Processing video, please wait...",
+    FILE_ERROR: "Cannot find image data. Please select a valid file.",
+    VIDEO_ERROR: "Invalid video file. Please try again.",
+    LIMIT_EXCEEDED: "You can only select up to 5 images.",
+    USER_CANCELLED: "User cancelled the selection.",
+    UNKNOWN_ERROR: "Something went wrong. Please try again.",
+};

package/dist/utils/permissions.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Request storage/doc access permissions cross-platform.
+ * Handles Android < 13 and Android 13+ separately.
+ */
+export declare const requestDocumentPermission: () => Promise<boolean>;
+/**
+ * ✅ Camera Permission
+ */
+export declare const cameraPermissions: (callback: (status: boolean) => void) => Promise<void>;
+/**
+ * 🎤 Microphone Permission (needed for video recording)
+ */
+export declare const checkMicroPhonePermission: () => Promise<boolean>;
+/**
+ * 🖼️ Gallery / Storage Permission
+ * ✅ Handles Android < 13 and >= 13
+ */
+export declare const galleryPermissions: (callback: (status: boolean) => void) => Promise<void>;

package/dist/utils/permissions.js

@@ -0,0 +1,106 @@
+import { Platform, PermissionsAndroid } from 'react-native';
+import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
+/**
+ * Request storage/doc access permissions cross-platform.
+ * Handles Android < 13 and Android 13+ separately.
+ */
+export const requestDocumentPermission = async () => {
+    try {
+        if (Platform.OS === 'android') {
+            const androidVersion = Platform.Version;
+            if (androidVersion < 33) {
+                // ✅ Android 12 or below
+                const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, {
+                    title: 'Storage Permission',
+                    message: 'App needs access to your storage to pick documents.',
+                    buttonPositive: 'OK',
+                });
+                return granted === PermissionsAndroid.RESULTS.GRANTED;
+            }
+            else {
+                // ✅ Android 13+ (API 33): use READ_MEDIA_* permissions
+                const result = await request(PERMISSIONS.ANDROID.READ_MEDIA_IMAGES);
+                return result === RESULTS.GRANTED;
+            }
+        }
+        else if (Platform.OS === 'ios') {
+            // ✅ iOS
+            const result = await request(PERMISSIONS.IOS.MEDIA_LIBRARY);
+            return result === RESULTS.GRANTED;
+        }
+        return true; // web/other fallback
+    }
+    catch (error) {
+        console.warn('Permission error:', error);
+        return false;
+    }
+};
+/**
+ * ✅ Camera Permission
+ */
+export const cameraPermissions = async (callback) => {
+    try {
+        if (Platform.OS === 'ios') {
+            const result = await request(PERMISSIONS.IOS.CAMERA);
+            callback(result === RESULTS.GRANTED);
+        }
+        else {
+            const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
+            callback(result === PermissionsAndroid.RESULTS.GRANTED);
+        }
+    }
+    catch (error) {
+        console.log('Camera Permission Error:', error);
+        callback(false);
+    }
+};
+/**
+ * 🎤 Microphone Permission (needed for video recording)
+ */
+export const checkMicroPhonePermission = async () => {
+    try {
+        if (Platform.OS === 'ios') {
+            const result = await request(PERMISSIONS.IOS.MICROPHONE);
+            return result === RESULTS.GRANTED;
+        }
+        else {
+            const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO);
+            return result === PermissionsAndroid.RESULTS.GRANTED;
+        }
+    }
+    catch (error) {
+        console.log('Microphone Permission Error:', error);
+        return false;
+    }
+};
+/**
+ * 🖼️ Gallery / Storage Permission
+ * ✅ Handles Android < 13 and >= 13
+ */
+export const galleryPermissions = async (callback) => {
+    try {
+        if (Platform.OS === 'ios') {
+            const result = await request(PERMISSIONS.IOS.PHOTO_LIBRARY);
+            callback(result === RESULTS.GRANTED);
+        }
+        else {
+            const androidVersion = Platform.Version;
+            if (androidVersion >= 33) {
+                // 👉 Android 13+ requires READ_MEDIA permissions
+                const imagePermission = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES);
+                const videoPermission = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO);
+                callback(imagePermission === PermissionsAndroid.RESULTS.GRANTED ||
+                    videoPermission === PermissionsAndroid.RESULTS.GRANTED);
+            }
+            else {
+                // 👉 Below Android 13 needs old storage permission
+                const storagePermission = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
+                callback(storagePermission === PermissionsAndroid.RESULTS.GRANTED);
+            }
+        }
+    }
+    catch (error) {
+        console.log('Gallery Permission Error:', error);
+        callback(false);
+    }
+};

package/dist/utils/regex.d.ts

@@ -0,0 +1,2 @@
+export type InputType = "email" | "password" | "phone" | "number" | "text";
+export declare const defaultRegex: Record<InputType, RegExp>;

package/dist/utils/regex.js

@@ -0,0 +1,7 @@
+export const defaultRegex = {
+    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    phone: /^[0-9]{10}$/,
+    password: /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{6,}$/,
+    number: /^[0-9]+$/,
+    text: /^.{1,}$/, // at least 1 character
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@teamnhz/rn-ui-toolkit",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc && cpx \"src/**/*.json\" dist && cpx \"src/assets/images/*\" dist/assets/images",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-native": ">=0.77.2",
+    "react-native-elements": "^3.4.3",
+    "react-native-vector-icons": "^10.3.0",
+    "react-native-fast-image": "^8.6.3",
+    "react-native-gesture-handler": "^2.26.0",
+    "react-native-reanimated": "^3.17.5",
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-svg": "^15.12.1",
+    "react-native-modal": "^14.0.0-rc.1",
+    "react-native-date-picker": "^5.0.13",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "react-i18next": "^15.7.2",
+    "react-native-element-dropdown": "^2.12.4",
+    "@react-native-documents/picker": "^10.1.5",
+    "react-native-permissions": "^4.1.5",
+    "react-native-video-trim": "^3.0.9",
+    "react-native-image-picker": "^8.2.0",
+    "react-native-image-crop-picker": "^0.42.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2",
+     "@react-native-documents/picker": "^10.1.5",
+    "cpx": "^1.5.0"
+  }
+}