@umituz/react-native-design-system 1.14.0 → 2.0.0

package/src/responsive/responsiveSizing.ts

@@ -0,0 +1,134 @@
+/**
+ * Responsive Sizing Utilities
+ * Responsive sizing utilities for UI components.
+ */
+
+import { getScreenDimensions } from './deviceDetection';
+import {
+  DEVICE_BREAKPOINTS,
+  RESPONSIVE_PERCENTAGES,
+  SIZE_CONSTRAINTS,
+  HEIGHT_THRESHOLDS,
+} from './config';
+import { validateNumber, validateFontSize, safePercentage, clamp } from './validation';
+
+// Re-export grid utilities
+export {
+  getResponsiveGridColumns,
+  getResponsiveGridCellSize,
+  type GridCellSizeConfig,
+} from './gridUtils';
+
+/**
+ * Responsive logo/icon size
+ * @param baseSize - Base logo size (default: 140)
+ */
+export const getResponsiveLogoSize = (baseSize: number = 140): number => {
+  try {
+    const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 500);
+    const { width } = getScreenDimensions();
+
+    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+      const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.LOGO_SMALL_PHONE_MAX);
+      return clamp(calculatedSize, SIZE_CONSTRAINTS.LOGO_MIN_SMALL, SIZE_CONSTRAINTS.LOGO_MAX_SMALL);
+    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.LOGO_TABLET_MAX);
+      return clamp(calculatedSize, SIZE_CONSTRAINTS.LOGO_MIN_TABLET, SIZE_CONSTRAINTS.LOGO_MAX_TABLET);
+    }
+
+    return validatedBaseSize;
+  } catch {
+    return 140;
+  }
+};
+
+/**
+ * Responsive multiline input height
+ * @param baseHeight - Base input height (default: 200)
+ */
+export const getResponsiveInputHeight = (baseHeight: number = 200): number => {
+  try {
+    const validatedBaseHeight = validateNumber(baseHeight, 'baseHeight', 50, 500);
+    const { height } = getScreenDimensions();
+
+    if (height <= HEIGHT_THRESHOLDS.SMALL_DEVICE) {
+      const calculatedHeight = safePercentage(height, RESPONSIVE_PERCENTAGES.INPUT_SMALL_DEVICE);
+      return Math.min(calculatedHeight, SIZE_CONSTRAINTS.INPUT_MAX_SMALL);
+    } else if (height <= HEIGHT_THRESHOLDS.MEDIUM_DEVICE) {
+      const calculatedHeight = safePercentage(height, RESPONSIVE_PERCENTAGES.INPUT_MEDIUM_DEVICE);
+      return Math.min(calculatedHeight, SIZE_CONSTRAINTS.INPUT_MAX_MEDIUM);
+    }
+
+    return Math.min(validatedBaseHeight, SIZE_CONSTRAINTS.INPUT_MAX_LARGE);
+  } catch {
+    return 200;
+  }
+};
+
+/**
+ * Responsive icon container size
+ * @param baseSize - Base container size (default: 140)
+ */
+export const getResponsiveIconContainerSize = (baseSize: number = 140): number => {
+  try {
+    const validatedBaseSize = validateNumber(baseSize, 'baseSize', 50, 300);
+    const { width } = getScreenDimensions();
+
+    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+      const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.ICON_CONTAINER_SMALL_PHONE);
+      return Math.min(calculatedSize, SIZE_CONSTRAINTS.ICON_MAX_SMALL);
+    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      const calculatedSize = safePercentage(width, RESPONSIVE_PERCENTAGES.ICON_CONTAINER_TABLET);
+      return Math.min(calculatedSize, SIZE_CONSTRAINTS.ICON_MAX_TABLET);
+    }
+
+    return validatedBaseSize;
+  } catch {
+    return 140;
+  }
+};
+
+/**
+ * Responsive max width for content
+ * @param baseWidth - Base content width (default: 400)
+ */
+export const getResponsiveMaxWidth = (baseWidth: number = 400): number => {
+  try {
+    const validatedBaseWidth = validateNumber(baseWidth, 'baseWidth', 100, 1000);
+    const { width } = getScreenDimensions();
+
+    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+      return safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_SMALL_PHONE);
+    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      const calculatedWidth = safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_TABLET);
+      return Math.min(calculatedWidth, SIZE_CONSTRAINTS.CONTENT_MAX_TABLET);
+    }
+
+    const maxWidth = safePercentage(width, RESPONSIVE_PERCENTAGES.CONTENT_PHONE);
+    return Math.min(maxWidth, validatedBaseWidth);
+  } catch {
+    return 400;
+  }
+};
+
+/**
+ * Responsive font size
+ * @param baseFontSize - Base font size
+ */
+export const getResponsiveFontSize = (baseFontSize: number): number => {
+  try {
+    const validatedBaseSize = validateFontSize(baseFontSize);
+    const { width } = getScreenDimensions();
+
+    if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
+      const scaledSize = validatedBaseSize * RESPONSIVE_PERCENTAGES.FONT_SMALL_PHONE;
+      return Math.max(scaledSize, SIZE_CONSTRAINTS.FONT_MIN_SIZE);
+    } else if (width >= DEVICE_BREAKPOINTS.TABLET) {
+      return validatedBaseSize * RESPONSIVE_PERCENTAGES.FONT_TABLET;
+    }
+
+    return validatedBaseSize;
+  } catch {
+    return 16;
+  }
+};

package/src/responsive/useResponsive.ts

@@ -0,0 +1,140 @@
+/**
+ * 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();
+ * ```
+ */
+
+import { useCallback, useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  getResponsiveLogoSize,
+  getResponsiveInputHeight,
+  getResponsiveHorizontalPadding,
+  getResponsiveBottomPosition,
+  getResponsiveFABPosition,
+  getResponsiveModalMaxHeight,
+  getResponsiveMinModalHeight,
+  getResponsiveIconContainerSize,
+  getResponsiveGridColumns,
+  getResponsiveMaxWidth,
+  getResponsiveFontSize,
+  isSmallPhone,
+  isTablet,
+  isLandscape,
+  getDeviceType,
+  getMinTouchTarget,
+  DeviceType,
+} from './responsive';
+import { getSpacingMultiplier } from './deviceDetection';
+
+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;
+  bottomPosition: number;
+  fabPosition: { bottom: number; right: number };
+
+  // Responsive layout
+  modalMaxHeight: string;
+  modalMinHeight: number;
+  gridColumns: number;
+  spacingMultiplier: 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;
+}
+
+/**
+ * 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
+  const getLogoSize = useCallback((baseSize?: number) => getResponsiveLogoSize(baseSize), []);
+  const getInputHeight = useCallback((baseHeight?: number) => getResponsiveInputHeight(baseHeight), []);
+  const getIconSize = useCallback((baseSize?: number) => getResponsiveIconContainerSize(baseSize), []);
+  const getMaxWidth = useCallback((baseWidth?: number) => getResponsiveMaxWidth(baseWidth), []);
+  const getFontSize = useCallback((baseFontSize: number) => getResponsiveFontSize(baseFontSize), []);
+  const getGridCols = useCallback((mobile?: number, tablet?: number) => getResponsiveGridColumns(mobile, tablet), []);
+
+  // Memoize responsive values to prevent unnecessary recalculations
+  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),
+    bottomPosition: getResponsiveBottomPosition(undefined, insets),
+    fabPosition: getResponsiveFABPosition(insets),
+
+    // Responsive layout
+    modalMaxHeight: getResponsiveModalMaxHeight(),
+    modalMinHeight: getResponsiveMinModalHeight(),
+    gridColumns: getResponsiveGridColumns(),
+    spacingMultiplier: getSpacingMultiplier(),
+
+    // Utility functions (memoized)
+    getLogoSize,
+    getInputHeight,
+    getIconSize,
+    getMaxWidth,
+    getFontSize,
+    getGridCols,
+  }), [width, height, insets]);
+
+  return responsiveValues;
+};
+
+

package/src/responsive/validation.ts

@@ -0,0 +1,158 @@
+/**
+ * Input Validation Utilities
+ *
+ * Centralized validation for all responsive utility functions.
+ * Ensures type safety and prevents runtime errors.
+ */
+
+import { VALIDATION_CONSTRAINTS } from './config';
+
+/**
+ * Custom error class for responsive utilities
+ */
+export class ResponsiveValidationError extends Error {
+  constructor(message: string) {
+    super(`[Responsive] ${message}`);
+    this.name = 'ResponsiveValidationError';
+  }
+}
+
+/**
+ * Validates a numeric input parameter
+ * @param value - The value to validate
+ * @param paramName - Parameter name for error messages
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @throws ResponsiveValidationError if validation fails
+ */
+export const validateNumber = (
+  value: number | undefined,
+  paramName: string,
+  min: number = VALIDATION_CONSTRAINTS.MIN_BASE_SIZE,
+  max: number = VALIDATION_CONSTRAINTS.MAX_BASE_SIZE
+): number => {
+  if (value === undefined || value === null) {
+    throw new ResponsiveValidationError(`${paramName} is required`);
+  }
+
+  if (typeof value !== 'number' || isNaN(value)) {
+    throw new ResponsiveValidationError(`${paramName} must be a valid number`);
+  }
+
+  if (!isFinite(value)) {
+    throw new ResponsiveValidationError(`${paramName} must be a finite number`);
+  }
+
+  if (value < min) {
+    throw new ResponsiveValidationError(`${paramName} must be at least ${min}`);
+  }
+
+  if (value > max) {
+    throw new ResponsiveValidationError(`${paramName} must be at most ${max}`);
+  }
+
+  return value;
+};
+
+/**
+ * Validates font size input
+ * @param fontSize - Font size to validate
+ * @param paramName - Parameter name for error messages
+ * @returns Validated font size
+ */
+export const validateFontSize = (fontSize: number, paramName: string = 'fontSize'): number => {
+  return validateNumber(
+    fontSize,
+    paramName,
+    VALIDATION_CONSTRAINTS.MIN_BASE_FONT_SIZE,
+    VALIDATION_CONSTRAINTS.MAX_BASE_FONT_SIZE
+  );
+};
+
+/**
+ * Validates screen dimensions
+ * @param width - Screen width
+ * @param height - Screen height
+ * @throws ResponsiveValidationError if validation fails
+ */
+export const validateScreenDimensions = (width: number, height: number): void => {
+  validateNumber(
+    width,
+    'width',
+    VALIDATION_CONSTRAINTS.MIN_SCREEN_DIMENSION,
+    VALIDATION_CONSTRAINTS.MAX_SCREEN_DIMENSION
+  );
+  
+  validateNumber(
+    height,
+    'height',
+    VALIDATION_CONSTRAINTS.MIN_SCREEN_DIMENSION,
+    VALIDATION_CONSTRAINTS.MAX_SCREEN_DIMENSION
+  );
+};
+
+/**
+ * Validates safe area insets
+ * @param insets - Safe area insets object
+ * @throws ResponsiveValidationError if validation fails
+ */
+export const validateSafeAreaInsets = (insets: {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}): void => {
+  if (!insets || typeof insets !== 'object') {
+    throw new ResponsiveValidationError('Safe area insets must be an object');
+  }
+
+  const { top = 0, bottom = 0, left = 0, right = 0 } = insets;
+
+  validateNumber(top, 'insets.top', 0, 1000);
+  validateNumber(bottom, 'insets.bottom', 0, 1000);
+  validateNumber(left, 'insets.left', 0, 1000);
+  validateNumber(right, 'insets.right', 0, 1000);
+};
+
+/**
+ * Validates grid column parameters
+ * @param mobileColumns - Number of columns for mobile
+ * @param tabletColumns - Number of columns for tablet
+ * @throws ResponsiveValidationError if validation fails
+ */
+export const validateGridColumns = (
+  mobileColumns?: number,
+  tabletColumns?: number
+): void => {
+  if (mobileColumns !== undefined) {
+    validateNumber(mobileColumns, 'mobileColumns', 1, 20);
+  }
+  
+  if (tabletColumns !== undefined) {
+    validateNumber(tabletColumns, 'tabletColumns', 1, 20);
+  }
+};
+
+/**
+ * Clamps a value between min and max bounds
+ * @param value - Value to clamp
+ * @param min - Minimum value
+ * @param max - Maximum value
+ * @returns Clamped value
+ */
+export const clamp = (value: number, min: number, max: number): number => {
+  return Math.min(Math.max(value, min), max);
+};
+
+/**
+ * Safely calculates a percentage of a value
+ * @param value - Base value
+ * @param percentage - Percentage (0-1)
+ * @returns Calculated percentage
+ */
+export const safePercentage = (value: number, percentage: number): number => {
+  const validatedValue = validateNumber(value, 'value', 0, Infinity);
+  const validatedPercentage = clamp(percentage, 0, 1);
+  
+  return validatedValue * validatedPercentage;
+};

package/src/theme/core/BaseTokens.ts

@@ -0,0 +1,42 @@
+/**
+ * BASE TOKENS - Main Export
+ * 
+ * Aggregates all token modules into BASE_TOKENS
+ */
+
+import { spacing } from './tokens/Spacing';
+import { typography } from './tokens/Typography';
+import { borders } from './tokens/Borders';
+import { iconSizes, opacity, avatarSizes, sizes } from './tokens/Sizes';
+import type { BaseTokens } from './tokens/BaseTokens';
+
+/**
+ * BASE_TOKENS - Static design tokens
+ * These values don't change with theme (light/dark)
+ */
+export const BASE_TOKENS: BaseTokens = {
+  spacing,
+  typography,
+  borders,
+  iconSizes,
+  opacity,
+  avatarSizes,
+  sizes,
+};
+
+// Convenience exports
+export { spacing, typography, borders, iconSizes, opacity, avatarSizes, sizes };
+
+
+
+// Type exports
+export type {
+  BaseTokens,
+  Spacing,
+  Typography,
+  Borders,
+  IconSizes,
+  Opacity,
+  AvatarSizes,
+  ComponentSizes
+} from './tokens/BaseTokens';

package/src/theme/core/ColorPalette.ts

@@ -0,0 +1,29 @@
+/**
+ * COLOR PALETTE - Main Export
+ * 
+ * Aggregates all color modules and provides theme utilities
+ */
+
+import { lightColors } from './colors/LightColors';
+import { darkColors } from './colors/DarkColors';
+import { withAlpha, isValidHexColor } from './colors/ColorUtils';
+
+export type ColorPalette = typeof lightColors;
+export type ThemeMode = 'light' | 'dark';
+
+/**
+ * Get color palette for specific theme mode
+ * @param mode - 'light' or 'dark'
+ * @returns Color palette object
+ */
+export const getColorPalette = (mode: ThemeMode): ColorPalette => {
+  return mode === 'dark' ? darkColors : lightColors;
+};
+
+// Export all colors and utilities
+export { 
+  lightColors, 
+  darkColors, 
+  withAlpha, 
+  isValidHexColor 
+};

package/src/theme/core/CustomColors.ts

@@ -0,0 +1,122 @@
+/**
+ * Custom Colors Types
+ * 
+ * Types for custom theme color overrides
+ */
+
+import type { ColorPalette } from './ColorPalette';
+import { isValidHexColor } from './colors/ColorUtils';
+
+/**
+ * Custom theme colors that can override default colors
+ */
+export interface CustomThemeColors {
+  primary?: string;
+  primaryLight?: string;
+  primaryDark?: string;
+  secondary?: string;
+  secondaryLight?: string;
+  secondaryDark?: string;
+  accent?: string;
+  accentLight?: string;
+  accentDark?: string;
+  buttonPrimary?: string;
+  buttonSecondary?: string;
+}
+
+/**
+ * Validate custom colors object
+ * @param customColors - Custom colors to validate
+ * @returns true if all colors are valid hex format
+ */
+export const validateCustomColors = (customColors: CustomThemeColors): boolean => {
+  const colorValues = Object.values(customColors).filter(Boolean) as string[];
+  
+  for (const color of colorValues) {
+    if (!isValidHexColor(color)) {
+      if (__DEV__) {
+        console.warn('[validateCustomColors] Invalid hex color:', color);
+      }
+      return false;
+    }
+  }
+  
+  return true;
+};
+
+/**
+ * Apply custom colors to color palette
+ * @param palette - Base color palette
+ * @param customColors - Custom colors to apply
+ * @returns Color palette with custom colors applied
+ */
+export const applyCustomColors = (
+  palette: ColorPalette,
+  customColors?: CustomThemeColors,
+): ColorPalette => {
+  if (!customColors) {
+    return palette;
+  }
+
+  // Validate custom colors
+  if (!validateCustomColors(customColors)) {
+    if (__DEV__) {
+      console.error('[applyCustomColors] Invalid custom colors provided, using defaults');
+    }
+    return palette;
+  }
+
+  const result: Partial<ColorPalette> = {
+    ...palette,
+  };
+
+  // Apply custom primary colors
+  if (customColors.primary) {
+    result.primary = customColors.primary;
+    if (!customColors.buttonPrimary) {
+      result.buttonPrimary = customColors.primary;
+    }
+  }
+  if (customColors.primaryLight) {
+    result.primaryLight = customColors.primaryLight;
+  }
+  if (customColors.primaryDark) {
+    result.primaryDark = customColors.primaryDark;
+  }
+
+  // Apply custom secondary colors
+  if (customColors.secondary) {
+    result.secondary = customColors.secondary;
+    if (!customColors.buttonSecondary) {
+      result.buttonSecondary = customColors.secondary;
+    }
+  }
+  if (customColors.secondaryLight) {
+    result.secondaryLight = customColors.secondaryLight;
+  }
+  if (customColors.secondaryDark) {
+    result.secondaryDark = customColors.secondaryDark;
+  }
+
+  // Apply custom accent colors
+  if (customColors.accent) {
+    result.accent = customColors.accent;
+  }
+  if (customColors.accentLight) {
+    result.accentLight = customColors.accentLight;
+  }
+  if (customColors.accentDark) {
+    result.accentDark = customColors.accentDark;
+  }
+
+  // Apply custom button colors (override primary/secondary if set)
+  if (customColors.buttonPrimary) {
+    result.buttonPrimary = customColors.buttonPrimary;
+  }
+  if (customColors.buttonSecondary) {
+    result.buttonSecondary = customColors.buttonSecondary;
+  }
+
+  return result as ColorPalette;
+};
+

package/src/theme/core/NavigationTheme.ts

@@ -0,0 +1,72 @@
+import type { ColorPalette, ThemeMode } from "./ColorPalette";
+import type { ExtendedColorPalette } from "./themes";
+
+/**
+ * Font weight type compatible with React Navigation v7
+ */
+type FontWeight =
+  | "normal"
+  | "bold"
+  | "100"
+  | "200"
+  | "300"
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "800"
+  | "900";
+
+/**
+ * Font configuration for navigation theme
+ */
+interface FontConfig {
+  fontFamily: string;
+  fontWeight: FontWeight;
+}
+
+/**
+ * Navigation theme type compatible with React Navigation v7
+ */
+export interface NavigationTheme {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+    notification: string;
+  };
+  fonts: {
+    regular: FontConfig;
+    medium: FontConfig;
+    bold: FontConfig;
+    heavy: FontConfig;
+  };
+}
+
+/**
+ * Creates a React Navigation theme from design system colors
+ * Compatible with React Navigation v7+
+ */
+export const createNavigationTheme = (
+  colors: ColorPalette | ExtendedColorPalette,
+  themeMode: ThemeMode
+): NavigationTheme => ({
+  dark: themeMode === "dark",
+  colors: {
+    primary: colors.primary,
+    background: colors.backgroundPrimary,
+    card: colors.surface,
+    text: colors.textPrimary,
+    border: colors.borderLight,
+    notification: colors.error,
+  },
+  fonts: {
+    regular: { fontFamily: "System", fontWeight: "400" },
+    medium: { fontFamily: "System", fontWeight: "500" },
+    bold: { fontFamily: "System", fontWeight: "700" },
+    heavy: { fontFamily: "System", fontWeight: "800" },
+  },
+});