@nexara/nativeflow 0.1.7 → 0.1.9

package/src/constants/theme.ts

@@ -1,33 +1,33 @@
-type DefaultThemeType = {
-    THEME_PRIMARY_COLOR: string;
-    THEME_SECONDARY_COLOR: string;
-    TEXT_PRIMARY_COLOR: string;
-    TEXT_SECONDARY_COLOR: string;
-    TEXT_TARTARY_COLOR: string;
-    INPUT_BACKGROUND_COLOR: string;
-    INPUT_STROKE_COLOR: string;
-    INPUT_PLACEHOLDER_COLOR: string;
-    DISABLE: string;
-    DANGER: string;
-    SUCCESS: string;
-    WARNING: string;
-}
-
-export const DefaultTheme: DefaultThemeType = {
-    THEME_PRIMARY_COLOR: '#fff',
-    THEME_SECONDARY_COLOR: '#000',
-    TEXT_PRIMARY_COLOR: '#000',
-    TEXT_SECONDARY_COLOR: '#64748B',
-    TEXT_TARTARY_COLOR: '#fff',
-    INPUT_BACKGROUND_COLOR: '#fff',
-    INPUT_STROKE_COLOR: '#cbd5e1',
-    INPUT_PLACEHOLDER_COLOR: '#D3D3D3',
-    DISABLE: '#8080805e',
-    DANGER: '#ED2939',
-    SUCCESS: '#32CD32',
-    WARNING: '#ffbf00',
-
-
-
-
+type DefaultThemeType = {
+    THEME_PRIMARY_COLOR: string;
+    THEME_SECONDARY_COLOR: string;
+    TEXT_PRIMARY_COLOR: string;
+    TEXT_SECONDARY_COLOR: string;
+    TEXT_TARTARY_COLOR: string;
+    INPUT_BACKGROUND_COLOR: string;
+    INPUT_STROKE_COLOR: string;
+    INPUT_PLACEHOLDER_COLOR: string;
+    DISABLE: string;
+    DANGER: string;
+    SUCCESS: string;
+    WARNING: string;
+}
+
+export const DefaultTheme: DefaultThemeType = {
+    THEME_PRIMARY_COLOR: '#fff',
+    THEME_SECONDARY_COLOR: '#000',
+    TEXT_PRIMARY_COLOR: '#000',
+    TEXT_SECONDARY_COLOR: '#64748B',
+    TEXT_TARTARY_COLOR: '#fff',
+    INPUT_BACKGROUND_COLOR: '#fff',
+    INPUT_STROKE_COLOR: '#cbd5e1',
+    INPUT_PLACEHOLDER_COLOR: '#D3D3D3',
+    DISABLE: '#8080805e',
+    DANGER: '#ED2939',
+    SUCCESS: '#32CD32',
+    WARNING: '#ffbf00',
+
+
+
+
 }

package/src/constants/typographySizes.ts

@@ -1,22 +1,20 @@
-type typographySizeTypes = {
-    h1: number,
-    h2: number,
-    h3: number,
-    h4: number,
-    h6: number,
-    h5: number,
-    h7: number,
-}
-
-const typographySizes: typographySizeTypes = {
-    h1: 32,
-    h2: 24,
-    h3: 18,
-    h4: 16,
-    h5: 14,
-    h6: 12,
-    h7: 10,
-}
-
-export default typographySizes;
+type typographySizeTypes = {
+    [key: string]: number
+}
+
+const typographySizes: Record<string, number> = {
+    xxs: 10,
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 24,
+    '2xl': 28,
+    '3xl': 32,
+    '4xl': 36,
+    '5xl': 45,
+    '6xl': 57,
+}
+
+export default typographySizes;
 export type { typographySizeTypes };

package/src/helpers/CalculateGridSize.ts

@@ -1,26 +1,26 @@
-import deviceScreenSizeCategory from './DeviceSizeCategory';
-
-interface DeviceCategory {
-    size: string;
-    value: number;
-}
-
-const getGridValue = (propsSizeObj: Record<string, number>, windowWidth: number | undefined) => {
-    const propsSizeArray: [string, number][] = Object.entries(propsSizeObj);
-    let screenSizeCategory: DeviceCategory = deviceScreenSizeCategory(windowWidth);
-    let gridValue: number = 0;
-    if (!propsSizeObj[screenSizeCategory.size]) {
-        const arrIndex = propsSizeArray.findIndex(([size]) => size === screenSizeCategory.size);
-        for (let index = arrIndex - 1; index >= 0; index--) {
-            if (propsSizeArray[index]?.[1]) {
-                gridValue = propsSizeArray[index]?.[1] as number;
-                break;
-            }
-        }
-    } else {
-        gridValue = propsSizeObj[screenSizeCategory.size] as number;
-    }
-    return gridValue;
-}
-
+import deviceScreenSizeCategory from './DeviceSizeCategory';
+
+interface DeviceCategory {
+    size: string;
+    value: number;
+}
+
+const getGridValue = (propsSizeObj: Record<string, number>, windowWidth: number | undefined) => {
+    const propsSizeArray: [string, number][] = Object.entries(propsSizeObj);
+    const screenSizeCategory: DeviceCategory = deviceScreenSizeCategory(windowWidth);
+    let gridValue: number = 0;
+    if (!propsSizeObj[screenSizeCategory.size]) {
+        const arrIndex = propsSizeArray.findIndex(([size]) => size === screenSizeCategory.size);
+        for (let index = arrIndex - 1; index >= 0; index--) {
+            if (propsSizeArray[index]?.[1]) {
+                gridValue = propsSizeArray[index]?.[1] as number;
+                break;
+            }
+        }
+    } else {
+        gridValue = propsSizeObj[screenSizeCategory.size] as number;
+    }
+    return gridValue;
+}
+
 export default getGridValue;

package/src/helpers/DeviceSizeCategory.ts

@@ -1,22 +1,22 @@
-import { Dimensions } from "react-native";
-import { BreakPoints } from "../constants";
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
-
-interface DeviceCategory {
-    size: string;
-    value: number;
-}
-
-const deviceScreenSizeCategory = (windowWidth: number = SCREEN_WIDTH): DeviceCategory => {
-    if (windowWidth >= BreakPoints.xl) {
-        return { size: 'xl', value: BreakPoints.xl };
-    } else if (windowWidth >= BreakPoints.lg) {
-        return { size: 'lg', value: BreakPoints.xl };
-    } else if (windowWidth >= BreakPoints.md) {
-        return { size: 'md', value: BreakPoints.md };
-    } else if (windowWidth >= BreakPoints.sm) {
-        return { size: 'sm', value: BreakPoints.sm };
-    }
-    return { size: 'xs', value: BreakPoints.xs };
-}
+import { Dimensions } from "react-native";
+import { BreakPoints } from "../constants";
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+interface DeviceCategory {
+    size: string;
+    value: number;
+}
+
+const deviceScreenSizeCategory = (windowWidth: number = SCREEN_WIDTH): DeviceCategory => {
+    if (windowWidth >= BreakPoints.xl) {
+        return { size: 'xl', value: BreakPoints.xl };
+    } else if (windowWidth >= BreakPoints.lg) {
+        return { size: 'lg', value: BreakPoints.xl };
+    } else if (windowWidth >= BreakPoints.md) {
+        return { size: 'md', value: BreakPoints.md };
+    } else if (windowWidth >= BreakPoints.sm) {
+        return { size: 'sm', value: BreakPoints.sm };
+    }
+    return { size: 'xs', value: BreakPoints.xs };
+}
 export default deviceScreenSizeCategory;

package/src/helpers/ResponsiveCalculations.ts

@@ -1,108 +1,107 @@
-import { Dimensions, PixelRatio } from 'react-native';
-import { getGlobalContext } from '../components/Provider/ContextManager';
-import type { scalingModeTypes } from '../types';
-
-
-const {
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-} = Dimensions.get('window');
-
-// const GetScalingMode = () => getGlobalContext();
-// const scalingMode = useScalingMode();
-
-const isResponsive = true;
-const guidelineBaseWidth = 350;
-const guidelineBaseHeight = 680;
-const [shortDimension, longDimension] = SCREEN_WIDTH < SCREEN_HEIGHT ? [SCREEN_WIDTH, SCREEN_HEIGHT] : [SCREEN_HEIGHT, SCREEN_WIDTH];
-
-type scalingCacheKey = 'hScale' | 'vScale' | 'fs';
-
-const scalingCache = new Map<scalingCacheKey, object>();
-
-// export const fun = () => {
-//     return scalingCache
-// }
-
-const checkIsPhone = (size: number): number => {
-    if (SCREEN_WIDTH <= 430 && SCREEN_WIDTH >= 375) {
-        return size;
-    }
-    return 0;
-}
-
-const scale = (size: number, cacheKey: scalingCacheKey, mode: scalingModeTypes) => {
-    if (checkIsPhone(size)) {
-        return size;
-    }
-    const cacheScaleValue: any = scalingCache.get(cacheKey) || {};
-    let finalSize;
-    if (cacheScaleValue?.[size]) {
-        return cacheScaleValue?.[size];
-    }
-    if (mode === 'partial') {
-        const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
-        let scale = ((cacheKey === 'hScale' ? shortDimension : longDimension) / guidelineBaseHeight);
-        scale = 1 + (scale - 1) * slowDownRate;
-        let adjustedSize = size * Math.max(scale, 0.80);
-        finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
-    } else {
-        const baseScaleFactor = (cacheKey === 'hScale' ? (shortDimension / guidelineBaseWidth) : (longDimension / guidelineBaseHeight));
-        const clampedScaleFactor = Math.max(0.9, Math.min(baseScaleFactor, 1.2));
-        finalSize = Math.round(PixelRatio.roundToNearestPixel(size * clampedScaleFactor))
-    }
-    cacheScaleValue[size] = finalSize;
-    scalingCache.set(cacheKey, cacheScaleValue);
-    return finalSize;
-}
-
-export const horizontalScale = (size: number): number => {
-    const scalingMode = getGlobalContext().scaling.mode
-    return scale(size, 'hScale', scalingMode);
-}
-
-export const verticalScale = (size: number): number => {
-    const scalingMode = getGlobalContext().scaling.mode
-    return scale(size, 'vScale', scalingMode);
-}
-
-
-export const moderateScale = (size: number, factor = 0.5): number => {
-    if (isResponsive) {
-        return size + ((shortDimension / guidelineBaseWidth * size) - size) * factor;
-    } else {
-        return size + factor + 1;
-    }
-}
-export const moderateVerticalScale = (size: number, factor = 0.5): number => {
-    if (isResponsive) {
-        return size + (longDimension / guidelineBaseHeight * size) * factor;
-    } else {
-        return size + factor + 5;
-    }
-}
-
-export const responsiveFontSize = (fontSize: number): number => {
-    if (checkIsPhone(fontSize)) {
-        return fontSize;
-    }
-    const fsCache: any = scalingCache.get('fs') || {};
-    if (fsCache?.[fontSize]) {
-        return fsCache?.[fontSize];
-    }
-    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20
-    const screenDiagonal = Math.sqrt(SCREEN_WIDTH ** 2 + SCREEN_HEIGHT ** 2);
-    const baseScreenDiagonal = Math.sqrt(360 ** 2 + 640 ** 2);
-    let scale = screenDiagonal / baseScreenDiagonal;
-    scale = 1 + (scale - 1) * slowDownRate;
-    let adjustedFontSize = fontSize * Math.max(scale, 0.85);
-    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedFontSize));
-    fsCache[fontSize] = finalSize;
-    scalingCache.set('vScale', fsCache)
-    return finalSize;
-};
-
-
-
-
-
+import { Dimensions, PixelRatio } from 'react-native';
+import { getGlobalContext } from '../components/Provider/ContextManager';
+import type { scalingModeTypes } from '../types';
+
+
+const {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+} = Dimensions.get('window');
+
+// const isResponsive = true;
+const guidelineBaseWidth = 350;
+const guidelineBaseHeight = 680;
+const [shortDimension, longDimension] = SCREEN_WIDTH < SCREEN_HEIGHT ? [SCREEN_WIDTH, SCREEN_HEIGHT] : [SCREEN_HEIGHT, SCREEN_WIDTH];
+
+type scalingCacheKey = 'hScale' | 'vScale' | 'fs';
+
+const scalingCache = new Map<scalingCacheKey, object>();
+
+const checkIsPhone = (size: number): number => {
+    // if (SCREEN_WIDTH <= 430 && SCREEN_WIDTH >= 375) {
+    //     return size;
+    // }
+     if (SCREEN_WIDTH <= 430) {
+        return size;
+    }
+    return 0;
+}
+
+const scale = (size: number, cacheKey: scalingCacheKey, mode: scalingModeTypes) => {
+    if (checkIsPhone(size)) {
+        return size;
+    }
+    const cacheScaleValue: any = scalingCache.get(cacheKey) || {};
+    let finalSize;
+    if (cacheScaleValue?.[size]) {
+        return cacheScaleValue?.[size];
+    }
+    if (mode === 'partial') {
+        // const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
+        const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20;
+        let scale = ((cacheKey === 'hScale' ? shortDimension : longDimension) / guidelineBaseHeight);
+        scale = 1 + (scale - 1) * slowDownRate;
+        let adjustedSize = size * Math.max(scale, 0.80);
+        finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    } else {
+        const baseScaleFactor = (cacheKey === 'hScale' ? (shortDimension / guidelineBaseWidth) : (longDimension / guidelineBaseHeight));
+        const clampedScaleFactor = Math.max(0.9, Math.min(baseScaleFactor, 1.2));
+        finalSize = Math.round(PixelRatio.roundToNearestPixel(size * clampedScaleFactor))
+    }
+    cacheScaleValue[size] = finalSize;
+    cacheScaleValue[size] = finalSize;
+    scalingCache.set(cacheKey, cacheScaleValue);
+    return finalSize;
+}
+
+export const horizontalScale = (size: number): number => {
+    const scalingMode = getGlobalContext().scaling.mode;
+    return scale(size, 'hScale', scalingMode ?? 0);
+}
+
+export const verticalScale = (size: number): number => {
+    const scalingMode = getGlobalContext().scaling.mode;
+    return scale(size, 'vScale', scalingMode ?? 0);
+}
+
+
+// export const moderateScale = (size: number, factor = 0.5): number => {
+//     if (isResponsive) {
+//         return size + ((shortDimension / guidelineBaseWidth * size) - size) * factor;
+//     } else {
+//         return size + factor + 1;
+//     }
+// }
+// export const moderateVerticalScale = (size: number, factor = 0.5): number => {
+//     if (isResponsive) {
+//         return size + (longDimension / guidelineBaseHeight * size) * factor;
+//     } else {
+//         return size + factor + 5;
+//     }
+// }
+
+export const responsiveFontSize = (fontSize: number): number => {
+    if (checkIsPhone(fontSize)) {
+        return fontSize;
+    }
+    const fsCache: any = scalingCache.get('fs') || {};
+    if (fsCache?.[fontSize]) {
+        return fsCache?.[fontSize];
+    }
+    // const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20
+    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.15
+    const screenDiagonal = Math.sqrt(SCREEN_WIDTH ** 2 + SCREEN_HEIGHT ** 2);
+    const baseScreenDiagonal = Math.sqrt(360 ** 2 + 640 ** 2);
+    let scale = screenDiagonal / baseScreenDiagonal;
+    scale = 1 + (scale - 1) * slowDownRate;
+    let adjustedFontSize = fontSize * Math.max(scale, 0.85);
+    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedFontSize));
+    fsCache[fontSize] = finalSize;
+    scalingCache.set('fs', fsCache)
+    return finalSize;
+};
+
+
+
+
+

package/src/helpers/index.ts

@@ -1,3 +1,3 @@
-export { default as getGridValue } from './CalculateGridSize';
-export { default as deviceScreenSizeCategory } from './DeviceSizeCategory';
+export { default as getGridValue } from './CalculateGridSize';
+export { default as deviceScreenSizeCategory } from './DeviceSizeCategory';
 export * from "./ResponsiveCalculations";

package/src/hooks/index.ts

@@ -1,4 +1,4 @@
-export { default as useTheme } from './useTheme';
-export { default as useScalingMode } from './useScalingMode';
-export { default as useColorScheme } from './useColorScheme';
+export { default as useTheme } from './useTheme';
+export { default as useScalingMode } from './useScalingMode';
+export { default as useColorScheme } from './useColorScheme';
 export { default as useConditionalWindowDimension } from './useConditionalWindowDimension';

package/src/hooks/useColorScheme.tsx

@@ -1,12 +1,12 @@
-import { useContext } from 'react';
-import { Context } from '../components/Provider/NativeProvider';
-
-const useColorScheme = () => {
-    const context = useContext(Context)?.mode;
-    if (!context) {
-        throw new Error('useColorScheme must be used within a NativeProvider');
-    }
-    return context;
-};
-
+import { useContext } from 'react';
+import { Context } from '../components/Provider/NativeProvider';
+
+const useColorScheme = () => {
+    const context = useContext(Context)?.mode;
+    if (!context) {
+        throw new Error('useColorScheme must be used within a NativeProvider');
+    }
+    return context;
+};
+
 export default useColorScheme;

package/src/hooks/useConditionalWindowDimension.tsx

@@ -1,7 +1,7 @@
-import { useWindowDimensions } from "react-native";
-
-const useConditionalWindowDimension = (isTrackDimension: boolean): { width: number | undefined; height: number | undefined } => {
-    return isTrackDimension ? useWindowDimensions() : { width: undefined, height: undefined }
-}
-
-export default useConditionalWindowDimension;
+import { useWindowDimensions } from "react-native";
+
+const useConditionalWindowDimension = (isTrackDimension: boolean): { width: number | undefined; height: number | undefined } => {
+    return isTrackDimension ? useWindowDimensions() : { width: undefined, height: undefined }
+}
+
+export default useConditionalWindowDimension;

package/src/hooks/useScalingMode.tsx

@@ -1,6 +1,6 @@
-import { useContext } from 'react';
-import { Context } from '../components/Provider/NativeProvider';
-
-const useScalingMode = () => useContext(Context)?.scaling;
-
-export default useScalingMode;
+import { useContext } from 'react';
+import { Context } from '../components/Provider/NativeProvider';
+
+const useScalingMode = () => useContext(Context)?.scaling;
+
+export default useScalingMode;

package/src/hooks/useTheme.tsx

@@ -1,13 +1,13 @@
-import { useContext } from 'react';
-import { Context } from '../components/Provider/NativeProvider';
-
-
-const useTheme = (isTrackTheme: boolean = true) => {
-    const context = isTrackTheme ? useContext(Context)?.theme : undefined;
-    if (isTrackTheme && !context) {
-        throw new Error('Ensure that your code is wrapped with NativeProvider in App.js, and make sure you are not using the useTheme hook outside of the NativeProvider.');
-    }
-    return context;
-};
-
+import { useContext } from 'react';
+import { Context } from '../components/Provider/NativeProvider';
+
+
+const useTheme = (isTrackTheme: boolean = true) => {
+    const context = isTrackTheme ? useContext(Context)?.theme : undefined;
+    if (isTrackTheme && !context) {
+        throw new Error('Ensure that your code is wrapped with NativeProvider in App.js, and make sure you are not using the useTheme hook outside of the NativeProvider.');
+    }
+    return context;
+};
+
 export default useTheme;

package/src/index.d.ts

@@ -1,3 +1,3 @@
-declare module '@nexara/nativeflow' {
-    export { Button } from 'components/Button/Button';
+declare module '@nexara/nativeflow' {
+    export { Button } from 'components/Button/Button';
 }