@umituz/react-native-design-system 2.6.62 → 2.6.64

package/src/responsive/tabbar/tabBarConfig.ts

@@ -0,0 +1,88 @@
+/**
+ * Tab Bar Configuration
+ */
+
+import { isTablet } from '../../device/detection';
+import { validateSafeAreaInsets } from '../validation';
+
+const TAB_BAR_CONSTANTS = {
+  BASE_HEIGHT_PHONE: 60,
+  BASE_HEIGHT_TABLET: 70,
+  MIN_PADDING_BOTTOM: 8,
+  MIN_PADDING_TOP: 8,
+  ICON_SIZE_PHONE: 24,
+  ICON_SIZE_TABLET: 28,
+  FAB_SIZE_PHONE: 64,
+  FAB_SIZE_TABLET: 72,
+  FAB_OFFSET_Y_PHONE: -24,
+  FAB_OFFSET_Y_TABLET: -28,
+} as const;
+
+export interface ResponsiveTabBarConfig {
+  readonly height: number;
+  readonly paddingBottom: number;
+  readonly paddingTop: number;
+  readonly iconSize: number;
+  readonly fabSize: number;
+  readonly fabOffsetY: number;
+}
+
+export const getResponsiveTabBarHeight = (
+  insets: { bottom?: number } = { bottom: 0 }
+): number => {
+  try {
+    validateSafeAreaInsets(insets);
+    const { bottom = 0 } = insets;
+    const isTabletDevice = isTablet();
+
+    const baseHeight = isTabletDevice
+      ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
+      : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
+
+    const bottomPadding = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM);
+
+    return baseHeight + bottomPadding;
+  } catch {
+    return TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE + TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM;
+  }
+};
+
+export const getResponsiveTabBarConfig = (
+  insets: { bottom?: number } = { bottom: 0 }
+): ResponsiveTabBarConfig => {
+  try {
+    validateSafeAreaInsets(insets);
+    const { bottom = 0 } = insets;
+    const isTabletSize = isTablet();
+
+    const baseHeight = isTabletSize
+      ? TAB_BAR_CONSTANTS.BASE_HEIGHT_TABLET
+      : TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE;
+
+    const paddingBottom = Math.max(bottom, TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM);
+
+    return {
+      height: baseHeight + paddingBottom,
+      paddingBottom,
+      paddingTop: TAB_BAR_CONSTANTS.MIN_PADDING_TOP,
+      iconSize: isTabletSize
+        ? TAB_BAR_CONSTANTS.ICON_SIZE_TABLET
+        : TAB_BAR_CONSTANTS.ICON_SIZE_PHONE,
+      fabSize: isTabletSize
+        ? TAB_BAR_CONSTANTS.FAB_SIZE_TABLET
+        : TAB_BAR_CONSTANTS.FAB_SIZE_PHONE,
+      fabOffsetY: isTabletSize
+        ? TAB_BAR_CONSTANTS.FAB_OFFSET_Y_TABLET
+        : TAB_BAR_CONSTANTS.FAB_OFFSET_Y_PHONE,
+    };
+  } catch {
+    return {
+      height: TAB_BAR_CONSTANTS.BASE_HEIGHT_PHONE + TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM,
+      paddingBottom: TAB_BAR_CONSTANTS.MIN_PADDING_BOTTOM,
+      paddingTop: TAB_BAR_CONSTANTS.MIN_PADDING_TOP,
+      iconSize: TAB_BAR_CONSTANTS.ICON_SIZE_PHONE,
+      fabSize: TAB_BAR_CONSTANTS.FAB_SIZE_PHONE,
+      fabOffsetY: TAB_BAR_CONSTANTS.FAB_OFFSET_Y_PHONE,
+    };
+  }
+};

package/src/responsive/types/responsiveTypes.ts

@@ -0,0 +1,69 @@
+/**
+ * Responsive Hook Type Definitions
+ */
+
+import type { DeviceType } from '../../device/detection';
+import type { ResponsiveModalLayout, ResponsiveBottomSheetLayout, ResponsiveDialogLayout } from '../responsive';
+import type { ResponsiveTabBarConfig, ScreenLayoutConfig } from '../responsiveLayout';
+
+export interface UseResponsiveReturn {
+  // Device info
+  readonly width: number;
+  readonly height: number;
+  readonly isSmallDevice: boolean;
+  readonly isTabletDevice: boolean;
+  readonly isLandscapeDevice: boolean;
+  readonly deviceType: DeviceType;
+
+  // Safe area insets
+  readonly insets: {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+  };
+
+  // Responsive sizes
+  readonly logoSize: number;
+  readonly inputHeight: number;
+  readonly iconContainerSize: number;
+  readonly maxContentWidth: number;
+  readonly minTouchTarget: number;
+
+  // Responsive positioning
+  readonly horizontalPadding: number;
+  readonly verticalPadding: number;
+  readonly bottomPosition: number;
+  readonly fabPosition: { readonly bottom: number; readonly right: number };
+
+  // Screen layout config
+  readonly screenLayoutConfig: ScreenLayoutConfig;
+
+  // Responsive layout
+  readonly modalMaxHeight: string;
+  readonly modalMinHeight: number;
+  readonly gridColumns: number;
+  readonly spacingMultiplier: number;
+  readonly tabBarConfig: ResponsiveTabBarConfig;
+
+  // Modal layouts
+  readonly modalLayout: ResponsiveModalLayout;
+  readonly bottomSheetLayout: ResponsiveBottomSheetLayout;
+  readonly dialogLayout: ResponsiveDialogLayout;
+
+  // Onboarding specific
+  readonly onboardingIconSize: number;
+  readonly onboardingIconMarginTop: number;
+  readonly onboardingIconMarginBottom: number;
+  readonly onboardingTitleMarginBottom: number;
+  readonly onboardingDescriptionMarginTop: number;
+  readonly onboardingTextPadding: number;
+
+  // Utility functions
+  readonly getLogoSize: (baseSize?: number) => number;
+  readonly getInputHeight: (baseHeight?: number) => number;
+  readonly getIconSize: (baseSize?: number) => number;
+  readonly getMaxWidth: (baseWidth?: number) => number;
+  readonly getFontSize: (baseFontSize: number) => number;
+  readonly getGridCols: (mobile?: number, tablet?: number) => number;
+}

package/src/responsive/useResponsive.ts

@@ -1,13 +1,6 @@
 /**
  * useResponsive Hook
- *
- * React Hook for accessing responsive utilities with real-time dimension updates
- * and safe area insets integration.
- *
- * Usage:
- * ```tsx
- * const { logoSize, inputHeight, fabPosition, isSmallDevice } = useResponsive();
- * ```
+ * Refactored: Extracted compute functions
  */
 
 import { useCallback, useMemo } from "react";
@@ -16,108 +9,21 @@ import { useSafeAreaInsets } from "../safe-area";
 import {
   getResponsiveLogoSize,
   getResponsiveInputHeight,
-  getResponsiveHorizontalPadding,
-  getResponsiveVerticalPadding,
-  getScreenLayoutConfig,
-  getResponsiveBottomPosition,
-  getResponsiveFABPosition,
-  getResponsiveTabBarConfig,
-  getResponsiveModalMaxHeight,
-  getResponsiveMinModalHeight,
-  getResponsiveModalLayout,
-  getResponsiveBottomSheetLayout,
-  getResponsiveDialogLayout,
   getResponsiveIconContainerSize,
-  getResponsiveGridColumns,
   getResponsiveMaxWidth,
   getResponsiveFontSize,
-  type ResponsiveModalLayout,
-  type ResponsiveBottomSheetLayout,
-  type ResponsiveDialogLayout,
-  type ResponsiveTabBarConfig,
-  type ScreenLayoutConfig,
+  getResponsiveGridColumns,
 } from "./responsive";
-import {
-  isSmallPhone,
-  isTablet,
-  isLandscape,
-  getDeviceType,
-  DeviceType,
-  getSpacingMultiplier,
-} from "../device/detection";
-import { getMinTouchTarget } from "./platformConstants";
-
-export interface UseResponsiveReturn {
-  // Device info
-  width: number;
-  height: number;
-  isSmallDevice: boolean;
-  isTabletDevice: boolean;
-  isLandscapeDevice: boolean;
-  deviceType: DeviceType;
-
-  // Safe area insets
-  insets: {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-  };
-
-  // Responsive sizes
-  logoSize: number;
-  inputHeight: number;
-  iconContainerSize: number;
-  maxContentWidth: number;
-  minTouchTarget: number;
-
-  // Responsive positioning
-  horizontalPadding: number;
-  verticalPadding: number;
-  bottomPosition: number;
-  fabPosition: { bottom: number; right: number };
-
-  // Screen layout config (complete configuration for ScreenLayout)
-  screenLayoutConfig: ScreenLayoutConfig;
-
-  // Responsive layout
-  modalMaxHeight: string;
-  modalMinHeight: number;
-  gridColumns: number;
-  spacingMultiplier: number;
-  tabBarConfig: ResponsiveTabBarConfig;
-
-  // Modal layouts (complete configurations)
-  modalLayout: ResponsiveModalLayout;
-  bottomSheetLayout: ResponsiveBottomSheetLayout;
-  dialogLayout: ResponsiveDialogLayout;
-
-  // Onboarding specific responsive values
-  onboardingIconSize: number;
-  onboardingIconMarginTop: number;
-  onboardingIconMarginBottom: number;
-  onboardingTitleMarginBottom: number;
-  onboardingDescriptionMarginTop: number;
-  onboardingTextPadding: number;
-
-  // Utility functions
-  getLogoSize: (baseSize?: number) => number;
-  getInputHeight: (baseHeight?: number) => number;
-  getIconSize: (baseSize?: number) => number;
-  getMaxWidth: (baseWidth?: number) => number;
-  getFontSize: (baseFontSize: number) => number;
-  getGridCols: (mobile?: number, tablet?: number) => number;
-}
+import { computeDeviceInfo } from "./compute/computeDeviceInfo";
+import { computeResponsiveSizes, computeOnboardingSizes } from "./compute/computeResponsiveSizes";
+import { computeResponsivePositioning } from "./compute/computeResponsivePositioning";
+import type { UseResponsiveReturn } from "./types/responsiveTypes";
 
-/**
- * Hook for responsive design utilities
- * Automatically updates when screen dimensions or orientation changes
- */
 export const useResponsive = (): UseResponsiveReturn => {
   const { width, height } = useWindowDimensions();
   const insets = useSafeAreaInsets();
 
-  // Memoize utility functions to prevent unnecessary re-renders
+  // Memoize utility functions
   const getLogoSize = useCallback(
     (baseSize?: number) => getResponsiveLogoSize(baseSize),
     [],
@@ -144,66 +50,71 @@ export const useResponsive = (): UseResponsiveReturn => {
     [],
   );
 
-  // Memoize responsive values to prevent unnecessary recalculations
+  // Compute all responsive values
   const responsiveValues = useMemo(
-    () => ({
-      // Device info
-      width,
-      height,
-      isSmallDevice: isSmallPhone(),
-      isTabletDevice: isTablet(),
-      isLandscapeDevice: isLandscape(),
-      deviceType: getDeviceType(),
-
-      // Safe area insets
-      insets,
-
-      // Responsive sizes (with default values)
-      logoSize: getResponsiveLogoSize(),
-      inputHeight: getResponsiveInputHeight(),
-      iconContainerSize: getResponsiveIconContainerSize(),
-      maxContentWidth: getResponsiveMaxWidth(),
-      minTouchTarget: getMinTouchTarget(),
-
-      // Responsive positioning
-      horizontalPadding: getResponsiveHorizontalPadding(undefined, insets),
-      verticalPadding: getResponsiveVerticalPadding(insets),
-      bottomPosition: getResponsiveBottomPosition(undefined, insets),
-      fabPosition: getResponsiveFABPosition(insets),
-
-      // Screen layout config (complete configuration for ScreenLayout)
-      screenLayoutConfig: getScreenLayoutConfig(insets),
-
-      // Responsive layout
-      modalMaxHeight: getResponsiveModalMaxHeight(),
-      modalMinHeight: getResponsiveMinModalHeight(),
-      gridColumns: getResponsiveGridColumns(),
-      spacingMultiplier: getSpacingMultiplier(),
-      tabBarConfig: getResponsiveTabBarConfig(insets),
-
-      // Modal layouts (complete configurations)
-      modalLayout: getResponsiveModalLayout(),
-      bottomSheetLayout: getResponsiveBottomSheetLayout(),
-      dialogLayout: getResponsiveDialogLayout(),
-
-      // Onboarding specific responsive values
-      onboardingIconSize: getIconSize(64),
-      onboardingIconMarginTop: getSpacingMultiplier() * 24,
-      onboardingIconMarginBottom: getSpacingMultiplier() * 16,
-      onboardingTitleMarginBottom: getSpacingMultiplier() * 16,
-      onboardingDescriptionMarginTop: getSpacingMultiplier() * 12,
-      onboardingTextPadding: getSpacingMultiplier() * 20,
-
-      // Utility functions
-      getLogoSize,
-      getInputHeight,
-      getIconSize,
-      getMaxWidth,
-      getFontSize,
-      getGridCols,
-    }),
+    () => {
+      const deviceInfo = computeDeviceInfo();
+      const sizes = computeResponsiveSizes();
+      const positioning = computeResponsivePositioning(insets);
+      const onboarding = computeOnboardingSizes(deviceInfo);
+
+      return {
+        // Device info
+        width,
+        height,
+        isSmallDevice: deviceInfo.isSmallDevice,
+        isTabletDevice: deviceInfo.isTabletDevice,
+        isLandscapeDevice: deviceInfo.isLandscapeDevice,
+        deviceType: deviceInfo.deviceType,
+
+        // Safe area insets
+        insets,
+
+        // Responsive sizes
+        logoSize: sizes.logoSize,
+        inputHeight: sizes.inputHeight,
+        iconContainerSize: sizes.iconContainerSize,
+        maxContentWidth: sizes.maxContentWidth,
+        minTouchTarget: sizes.minTouchTarget,
+
+        // Responsive positioning
+        horizontalPadding: positioning.horizontalPadding,
+        verticalPadding: positioning.verticalPadding,
+        bottomPosition: positioning.bottomPosition,
+        fabPosition: positioning.fabPosition,
+
+        // Screen layout config
+        screenLayoutConfig: positioning.screenLayoutConfig,
+
+        // Responsive layout
+        modalMaxHeight: sizes.modalMaxHeight,
+        modalMinHeight: sizes.modalMinHeight,
+        gridColumns: sizes.gridColumns,
+        spacingMultiplier: deviceInfo.spacingMultiplier,
+        tabBarConfig: positioning.tabBarConfig,
+
+        // Modal layouts
+        modalLayout: positioning.modalLayout,
+        bottomSheetLayout: positioning.bottomSheetLayout,
+        dialogLayout: positioning.dialogLayout,
+
+        // Onboarding specific
+        ...onboarding,
+
+        // Utility functions
+        getLogoSize,
+        getInputHeight,
+        getIconSize,
+        getMaxWidth,
+        getFontSize,
+        getGridCols,
+      };
+    },
     [width, height, insets],
   );
 
   return responsiveValues;
 };
+
+// Re-export types
+export type { UseResponsiveReturn } from './types/responsiveTypes';