@umituz/react-native-design-system 1.7.1 → 1.7.2

package/src/presentation/tokens/commonStyles.ts

@@ -1,253 +0,0 @@
-/**
- * Common Styles - Reusable Style Patterns
- *
- * Centralized style utilities to reduce duplication across screens.
- * These styles are composable and follow DRY principles.
- *
- * Usage:
- * ```typescript
- * import { useCommonStyles } from '@domains/design-system/commonStyles';
- *
- * const MyComponent = () => {
- *   const commonStyles = useCommonStyles();
- *   return <View style={commonStyles.screenContainer}>...</View>;
- * };
- * ```
- */
-
-import { ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-
-/**
- * Hook to get common styles with dynamic theme support
- */
-export const useCommonStyles = () => {
-  const tokens = useAppDesignTokens();
-
-  return {
-    // ========================================================================
-    // SCREEN CONTAINERS
-    // ========================================================================
-
-    /**
-     * Standard full-screen container
-     * Most common pattern: flex: 1 with background color
-     */
-    screenContainer: {
-      flex: 1,
-      backgroundColor: tokens.colors.backgroundPrimary,
-    } as ViewStyle,
-
-    /**
-     * Basic flex container without background
-     * Use when background is set elsewhere or not needed
-     */
-    flexContainer: {
-      flex: 1,
-    } as ViewStyle,
-
-    /**
-     * Screen container with secondary background
-     */
-    screenContainerSecondary: {
-      flex: 1,
-      backgroundColor: tokens.colors.backgroundSecondary,
-    } as ViewStyle,
-
-    // ========================================================================
-    // SCROLL CONTAINERS
-    // ========================================================================
-
-    /**
-     * Standard ScrollView wrapper
-     */
-    scrollView: {
-      flex: 1,
-    } as ViewStyle,
-
-    /**
-     * ScrollView content container with standard padding
-     */
-    scrollContent: {
-      paddingHorizontal: tokens.spacing.lg,
-      paddingBottom: tokens.spacing.xl,
-    } as ViewStyle,
-
-    /**
-     * ScrollView content that grows to fill available space
-     */
-    scrollContentGrow: {
-      flexGrow: 1,
-      padding: tokens.spacing.lg,
-    } as ViewStyle,
-
-    /**
-     * Centered scroll content (for forms, onboarding screens)
-     */
-    scrollContentCentered: {
-      flexGrow: 1,
-      padding: tokens.spacing.lg,
-      justifyContent: 'center' as const,
-    } as ViewStyle,
-
-    // ========================================================================
-    // LAYOUT UTILITIES
-    // ========================================================================
-
-    /**
-     * Centered container - both horizontal and vertical
-     * Perfect for empty states, splash screens
-     */
-    centerContainer: {
-      flex: 1,
-      justifyContent: 'center' as const,
-      alignItems: 'center' as const,
-    } as ViewStyle,
-
-    /**
-     * Centered container with padding
-     */
-    centerContainerPadded: {
-      flex: 1,
-      justifyContent: 'center' as const,
-      alignItems: 'center' as const,
-      paddingHorizontal: tokens.spacing.xl,
-    } as ViewStyle,
-
-    /**
-     * Horizontal row layout
-     */
-    row: {
-      flexDirection: 'row' as const,
-      alignItems: 'center' as const,
-    } as ViewStyle,
-
-    /**
-     * Horizontal row with space between
-     */
-    rowBetween: {
-      flexDirection: 'row' as const,
-      alignItems: 'center' as const,
-      justifyContent: 'space-between' as const,
-    } as ViewStyle,
-
-    /**
-     * Horizontal row centered
-     */
-    rowCenter: {
-      flexDirection: 'row' as const,
-      alignItems: 'center' as const,
-      justifyContent: 'center' as const,
-    } as ViewStyle,
-
-    // ========================================================================
-    // PADDING UTILITIES
-    // ========================================================================
-
-    /**
-     * Standard horizontal padding
-     */
-    paddedHorizontal: {
-      paddingHorizontal: tokens.spacing.lg,
-    } as ViewStyle,
-
-    /**
-     * Standard vertical padding
-     */
-    paddedVertical: {
-      paddingVertical: tokens.spacing.lg,
-    } as ViewStyle,
-
-    /**
-     * Standard padding all sides
-     */
-    padded: {
-      padding: tokens.spacing.lg,
-    } as ViewStyle,
-
-    // ========================================================================
-    // SECTION STYLES
-    // ========================================================================
-
-    /**
-     * Standard section container
-     */
-    section: {
-      marginBottom: tokens.spacing.xl,
-    } as ViewStyle,
-
-    /**
-     * Section with padding
-     */
-    sectionPadded: {
-      marginBottom: tokens.spacing.xl,
-      paddingHorizontal: tokens.spacing.lg,
-    } as ViewStyle,
-
-    // ========================================================================
-    // TEXT STYLES
-    // ========================================================================
-
-    /**
-     * Screen title - primary heading
-     */
-    screenTitle: {
-      ...tokens.typography.headingLarge,
-      color: tokens.colors.textPrimary,
-      marginBottom: tokens.spacing.sm,
-    } as TextStyle,
-
-    /**
-     * Section title
-     */
-    sectionTitle: {
-      ...tokens.typography.headingMedium,
-      color: tokens.colors.textPrimary,
-      marginBottom: tokens.spacing.md,
-    } as TextStyle,
-
-    /**
-     * Subtitle/description text
-     */
-    subtitle: {
-      ...tokens.typography.bodyMedium,
-      color: tokens.colors.textSecondary,
-      textAlign: 'center' as const,
-    } as TextStyle,
-
-    /**
-     * Body text
-     */
-    bodyText: {
-      ...tokens.typography.bodyMedium,
-      color: tokens.colors.textPrimary,
-    } as TextStyle,
-
-    /**
-     * Secondary text (muted)
-     */
-    secondaryText: {
-      ...tokens.typography.bodySmall,
-      color: tokens.colors.textSecondary,
-    } as TextStyle,
-
-    // ========================================================================
-    // FORM STYLES
-    // ========================================================================
-
-    /**
-     * Form container
-     */
-    form: {
-      width: '100%',
-    } as ViewStyle,
-
-    /**
-     * Form header section
-     */
-    formHeader: {
-      alignItems: 'center' as const,
-      marginBottom: tokens.spacing.xl,
-    } as ViewStyle,
-  };
-};

package/src/presentation/utils/platformConstants.ts

@@ -1,124 +0,0 @@
-/**
- * Platform-Specific Constants
- *
- * Design system constants that ensure compliance with platform guidelines.
- * These values are based on official Human Interface Guidelines (HIG) from Apple and Material Design from Google.
- */
-
-/**
- * iOS Human Interface Guidelines (HIG) Constants
- *
- * @see https://developer.apple.com/design/human-interface-guidelines/layout
- */
-export const IOS_HIG = {
-  /**
-   * Minimum Touch Target Size
-   *
-   * Apple requires a minimum tappable area of 44pt x 44pt for ALL interactive controls.
-   * This is enforced during App Store review.
-   *
-   * @critical Violating this can result in App Store rejection
-   */
-  MIN_TOUCH_TARGET: 44,
-
-  /**
-   * Recommended Minimum Touch Target Size
-   *
-   * For better accessibility and usability, Apple recommends 48pt x 48pt.
-   */
-  RECOMMENDED_TOUCH_TARGET: 48,
-
-  /**
-   * Minimum Text Size
-   *
-   * Minimum font size for body text to ensure readability.
-   */
-  MIN_TEXT_SIZE: 17,
-
-  /**
-   * Minimum Contrast Ratio
-   *
-   * WCAG AA compliance requires 4.5:1 for normal text.
-   */
-  MIN_CONTRAST_RATIO: 4.5,
-} as const;
-
-/**
- * Android Material Design Guidelines Constants
- *
- * @see https://m3.material.io/foundations/layout/applying-layout/window-size-classes
- */
-export const ANDROID_MATERIAL = {
-  /**
-   * Minimum Touch Target Size
-   *
-   * Material Design 3 recommends a minimum of 48dp x 48dp.
-   */
-  MIN_TOUCH_TARGET: 48,
-
-  /**
-   * Minimum Text Size
-   *
-   * Minimum font size for body text.
-   */
-  MIN_TEXT_SIZE: 14,
-} as const;
-
-/**
- * Universal Platform Constants
- *
- * These values work across both iOS and Android, taking the more restrictive requirement.
- */
-export const PLATFORM_CONSTANTS = {
-  /**
-   * Minimum Touch Target Size
-   *
-   * Uses iOS requirement (44pt) as it's more restrictive than Android (48dp).
-   * This ensures compliance on both platforms.
-   */
-  MIN_TOUCH_TARGET: Math.max(IOS_HIG.MIN_TOUCH_TARGET, ANDROID_MATERIAL.MIN_TOUCH_TARGET),
-
-  /**
-   * Recommended Touch Target Size
-   *
-   * Uses the higher value between iOS and Android recommendations.
-   */
-  RECOMMENDED_TOUCH_TARGET: 48,
-
-  /**
-   * Minimum Text Size
-   *
-   * Uses iOS requirement as it's larger.
-   */
-  MIN_TEXT_SIZE: Math.max(IOS_HIG.MIN_TEXT_SIZE, ANDROID_MATERIAL.MIN_TEXT_SIZE),
-} as const;
-
-/**
- * Helper function to validate touch target size
- *
- * @param size - The size to validate (in pt/dp)
- * @returns true if size meets platform requirements
- */
-export const isValidTouchTarget = (size: number): boolean => {
-  return size >= IOS_HIG.MIN_TOUCH_TARGET;
-};
-
-/**
- * Helper function to get minimum touch target for component
- *
- * @param componentType - The type of component ('button' | 'input' | 'icon' | 'generic')
- * @returns The minimum touch target size for that component type
- */
-export const getMinTouchTarget = (componentType: 'button' | 'input' | 'icon' | 'generic' = 'generic'): number => {
-  switch (componentType) {
-    case 'button':
-      return PLATFORM_CONSTANTS.RECOMMENDED_TOUCH_TARGET; // 48pt recommended for buttons
-    case 'input':
-      return PLATFORM_CONSTANTS.RECOMMENDED_TOUCH_TARGET; // 48pt recommended for inputs
-    case 'icon':
-      return IOS_HIG.MIN_TOUCH_TARGET; // 44pt minimum for icon buttons
-    case 'generic':
-    default:
-      return IOS_HIG.MIN_TOUCH_TARGET; // 44pt minimum for all other interactive elements
-  }
-};