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

package/src/theme/core/tokens/BaseTokens.ts

@@ -0,0 +1,144 @@
+/**
+ * BASE TOKENS - Type Definitions
+ * 
+ * Type definitions for all static design tokens
+ */
+
+import type { TextStyle, ViewStyle } from 'react-native';
+
+export type Spacing = {
+  // Base Spacing Scale
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+  xxxl: number;
+
+  // Semantic Spacing
+  screenPadding: number;
+  cardPadding: number;
+  buttonPadding: number;
+  inputPadding: number;
+  sectionSpacing: number;
+
+  // Icon Sizes
+  iconSizeSmall: number;
+  iconSizeMedium: number;
+  iconSizeLarge: number;
+  iconSizeXLarge: number;
+  iconSizeHero: number;
+
+  // Component Heights
+  buttonHeight: number;
+  inputHeight: number;
+  appBarHeight: number;
+  tabBarHeight: number;
+};
+
+export type Typography = {
+  displayLarge: TextStyle;
+  displayMedium: TextStyle;
+  displaySmall: TextStyle;
+  headlineLarge: TextStyle;
+  headlineMedium: TextStyle;
+  headlineSmall: TextStyle;
+  titleLarge: TextStyle;
+  titleMedium: TextStyle;
+  titleSmall: TextStyle;
+  bodyLarge: TextStyle;
+  bodyMedium: TextStyle;
+  bodySmall: TextStyle;
+  labelLarge: TextStyle;
+  labelMedium: TextStyle;
+  labelSmall: TextStyle;
+  button: TextStyle;
+  caption: TextStyle;
+  overline: TextStyle;
+  // Legacy compatibility
+  headingLarge: TextStyle;
+  headingMedium: TextStyle;
+  headingSmall: TextStyle;
+  // Font weight helpers (for inline fontWeight usage)
+  semibold: '600';
+  medium: '500';
+  bold: '700';
+};
+
+export type Borders = {
+  radius: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    full: number;
+  };
+  width: {
+    none: number;
+    thin: number;
+    medium: number;
+    thick: number;
+  };
+  button: ViewStyle;
+  card: ViewStyle;
+  input: ViewStyle;
+  pill: ViewStyle;
+};
+
+export type IconSizes = {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+  hero: number;
+};
+
+export type Opacity = {
+  disabled: number;
+  inactive: number;
+  subtle: number;
+  medium: number;
+  full: number;
+};
+
+export type AvatarSizes = {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+};
+
+export type ComponentSizes = {
+  touchTarget: number;
+  progressBar: {
+    normal: number;
+    thick: number;
+  };
+  dot: {
+    active: number;
+    inactive: number;
+  };
+  buttonHeight: {
+    sm: number;
+    md: number;
+    lg: number;
+  };
+};
+
+export type BaseTokens = {
+  spacing: Spacing;
+  typography: Typography;
+  borders: Borders;
+  iconSizes: IconSizes;
+  opacity: Opacity;
+  avatarSizes: AvatarSizes;
+  sizes: ComponentSizes;
+};

package/src/theme/core/tokens/Borders.ts

@@ -0,0 +1,43 @@
+/**
+ * BORDER TOKENS
+ * 
+ * Border radius, width, and component-specific border styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { Borders } from './BaseTokens';
+
+export const borders: Borders = {
+  radius: {
+    none: 0,
+    xs: 2,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    xxl: 24,
+    full: 9999, // TODO: Use DESIGN_CONSTANTS.FULL_BORDER_RADIUS
+  },
+  width: {
+    none: 0,
+    thin: 1,
+    medium: 2,
+    thick: 4,
+  },
+  button: {
+    borderRadius: 12,
+    borderWidth: 0,
+  } as ViewStyle,
+  card: {
+    borderRadius: 16,
+    borderWidth: 1,
+  } as ViewStyle,
+  input: {
+    borderRadius: 8,
+    borderWidth: 1,
+  } as ViewStyle,
+  pill: {
+    borderRadius: 9999,
+    borderWidth: 0,
+  } as ViewStyle,
+};

package/src/theme/core/tokens/Sizes.ts

@@ -0,0 +1,51 @@
+/**
+ * SIZE TOKENS
+ * 
+ * Icon sizes, opacity levels, avatar sizes, and component dimensions
+ */
+
+import type { IconSizes, Opacity, AvatarSizes, ComponentSizes } from './BaseTokens';
+
+export const iconSizes: IconSizes = {
+  xs: 16,
+  sm: 20,
+  md: 24,
+  lg: 32,
+  xl: 40,
+  xxl: 48,
+  hero: 64,
+};
+
+export const opacity: Opacity = {
+  disabled: 0.6,
+  inactive: 0.7,
+  subtle: 0.8,
+  medium: 0.9,
+  full: 1.0,
+};
+
+export const avatarSizes: AvatarSizes = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64,
+  xxl: 80,
+};
+
+export const sizes: ComponentSizes = {
+  touchTarget: 44, // TODO: Use DESIGN_CONSTANTS.MINIMUM_TOUCH_TARGET
+  progressBar: {
+    normal: 4,
+    thick: 8,
+  },
+  dot: {
+    active: 12,
+    inactive: 8,
+  },
+  buttonHeight: {
+    sm: 40,
+    md: 48,
+    lg: 56,
+  },
+};

package/src/theme/core/tokens/Spacing.ts

@@ -0,0 +1,38 @@
+/**
+ * SPACING TOKENS
+ * 
+ * Spacing scale and semantic spacing values
+ */
+
+import type { Spacing } from './BaseTokens';
+
+export const spacing: Spacing = {
+  // Base Spacing Scale (4px base unit)
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  xxxl: 64,
+
+  // Semantic Spacing
+  screenPadding: 20,
+  cardPadding: 16,
+  buttonPadding: 16,
+  inputPadding: 12,
+  sectionSpacing: 24,
+
+  // Icon Sizes
+  iconSizeSmall: 16,
+  iconSizeMedium: 20,
+  iconSizeLarge: 24,
+  iconSizeXLarge: 32,
+  iconSizeHero: 64,
+
+  // Component Heights
+  buttonHeight: 48,
+  inputHeight: 48,
+  appBarHeight: 56,
+  tabBarHeight: 60,
+};

package/src/theme/core/tokens/Typography.ts

@@ -0,0 +1,143 @@
+/**
+ * TYPOGRAPHY TOKENS
+ * 
+ * Typography scale and text styles following Material Design 3
+ */
+
+import type { TextStyle } from 'react-native';
+import type { Typography } from './BaseTokens';
+
+export const typography: Typography = {
+  displayLarge: {
+    fontSize: 57,
+    fontWeight: '400',
+    lineHeight: 64,
+    letterSpacing: -0.25,
+  } as TextStyle,
+  displayMedium: {
+    fontSize: 45,
+    fontWeight: '400',
+    lineHeight: 52,
+    letterSpacing: 0,
+  } as TextStyle,
+  displaySmall: {
+    fontSize: 36,
+    fontWeight: '400',
+    lineHeight: 44,
+    letterSpacing: 0,
+  } as TextStyle,
+  headlineLarge: {
+    fontSize: 32,
+    fontWeight: '400',
+    lineHeight: 40,
+    letterSpacing: 0,
+  } as TextStyle,
+  headlineMedium: {
+    fontSize: 28,
+    fontWeight: '400',
+    lineHeight: 36,
+    letterSpacing: 0,
+  } as TextStyle,
+  headlineSmall: {
+    fontSize: 24,
+    fontWeight: '400',
+    lineHeight: 32,
+    letterSpacing: 0,
+  } as TextStyle,
+  titleLarge: {
+    fontSize: 22,
+    fontWeight: '500',
+    lineHeight: 28,
+    letterSpacing: 0,
+  } as TextStyle,
+  titleMedium: {
+    fontSize: 16,
+    fontWeight: '500',
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  } as TextStyle,
+  titleSmall: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  } as TextStyle,
+  bodyLarge: {
+    fontSize: 16,
+    fontWeight: '400',
+    lineHeight: 24,
+    letterSpacing: 0.5,
+  } as TextStyle,
+  bodyMedium: {
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  } as TextStyle,
+  bodySmall: {
+    fontSize: 12,
+    fontWeight: '400',
+    lineHeight: 16,
+    letterSpacing: 0.4,
+  } as TextStyle,
+  labelLarge: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  } as TextStyle,
+  labelMedium: {
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: 16,
+    letterSpacing: 0.5,
+  } as TextStyle,
+  labelSmall: {
+    fontSize: 11,
+    fontWeight: '500',
+    lineHeight: 16,
+    letterSpacing: 0.5,
+  } as TextStyle,
+  button: {
+    fontSize: 14,
+    fontWeight: '500',
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  } as TextStyle,
+  caption: {
+    fontSize: 12,
+    fontWeight: '400',
+    lineHeight: 16,
+    letterSpacing: 0.4,
+  } as TextStyle,
+  overline: {
+    fontSize: 10,
+    fontWeight: '500',
+    lineHeight: 16,
+    letterSpacing: 1.5,
+    textTransform: 'uppercase',
+  } as TextStyle,
+    // Legacy compatibility aliases
+  headingLarge: {
+    fontSize: 32,
+    fontWeight: '700',
+    lineHeight: 40,
+    letterSpacing: 0,
+  } as TextStyle,
+  headingMedium: {
+    fontSize: 24,
+    fontWeight: '600',
+    lineHeight: 32,
+    letterSpacing: 0,
+  } as TextStyle,
+  headingSmall: {
+    fontSize: 20,
+    fontWeight: '600',
+    lineHeight: 28,
+    letterSpacing: 0,
+  } as TextStyle,
+  // Font weight helpers (for inline fontWeight usage)
+  semibold: '600' as const,
+  medium: '500' as const,
+  bold: '700' as const,
+};

package/src/theme/hooks/useAppDesignTokens.ts

@@ -0,0 +1,45 @@
+/**
+ * useAppDesignTokens Hook - Theme-Aware Design Tokens
+ *
+ * ✅ Automatically reads theme from global store
+ * ✅ No parameters needed - fully automatic!
+ * ✅ Returns tokens for current theme (light/dark)
+ * ✅ Single source of truth
+ *
+ * @example Usage (fully automatic theme-aware)
+ * ```typescript
+ * import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+ *
+ * const MyComponent = () => {
+ *   const tokens = useAppDesignTokens(); // Automatically uses current theme!
+ *   return (
+ *     <View style={{
+ *       backgroundColor: tokens.colors.primary,
+ *       padding: tokens.spacing.md
+ *     }}>
+ *       <Text style={tokens.typography.bodyLarge}>Hello!</Text>
+ *     </View>
+ *   );
+ * };
+ * ```
+ *
+ * How it works:
+ * - Reads themeMode from global store (useDesignSystemTheme)
+ * - App's theme store syncs to global store automatically
+ * - All components get correct tokens without prop drilling
+ * - Change theme once, everything updates!
+ */
+
+import { useMemo } from 'react';
+import { createDesignTokens, type DesignTokens } from '../core/TokenFactory';
+import { useDesignSystemTheme } from '../infrastructure/globalThemeStore';
+
+export const useAppDesignTokens = (): DesignTokens => {
+  const { themeMode, customColors } = useDesignSystemTheme();
+  
+  return useMemo(() => {
+    const mode = themeMode === 'dark' ? 'dark' : 'light';
+    return createDesignTokens(mode, customColors);
+  }, [themeMode, customColors]);
+};
+

package/src/theme/hooks/useCommonStyles.ts

@@ -0,0 +1,248 @@
+/**
+ * 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 '@umituz/react-native-design-system-theme';
+ *
+ * const MyComponent = () => {
+ *   const commonStyles = useCommonStyles();
+ *   return <View style={commonStyles.screenContainer}>...</View>;
+ * };
+ * ```
+ */
+
+import { useMemo } from 'react';
+import type { ViewStyle, TextStyle } from 'react-native';
+import { useAppDesignTokens } from './useAppDesignTokens';
+
+/**
+ * Hook to get common styles with dynamic theme support
+ * Memoized to prevent unnecessary re-renders
+ */
+export const useCommonStyles = () => {
+  const tokens = useAppDesignTokens();
+  
+  return useMemo(() => ({
+    // ========================================================================
+    // 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 ViewStyle,
+    
+    // ========================================================================
+    // LAYOUT UTILITIES
+    // ========================================================================
+    /**
+     * Centered container - both horizontal and vertical
+     * Perfect for empty states, splash screens
+     */
+    centerContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    } as ViewStyle,
+    
+    /**
+     * Centered container with padding
+     */
+    centerContainerPadded: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: tokens.spacing.xl,
+    } as ViewStyle,
+    
+    /**
+     * Horizontal row layout
+     */
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    } as ViewStyle,
+    
+    /**
+     * Horizontal row with space between
+     */
+    rowBetween: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    } as ViewStyle,
+    
+    /**
+     * Horizontal row centered
+     */
+    rowCenter: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    } 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 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',
+      marginBottom: tokens.spacing.xl,
+    } as ViewStyle,
+  }), [tokens]);
+};