@umituz/react-native-design-system 2.6.65 → 2.6.67

package/src/theme/hooks/commonStyles/formStyles.ts

@@ -0,0 +1,17 @@
+/**
+ * Form Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createFormStyles = (tokens: DesignTokens) => ({
+  form: {
+    width: '100%',
+  } as ViewStyle,
+
+  formHeader: {
+    alignItems: 'center',
+    marginBottom: tokens.spacing.xl,
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/layoutStyles.ts

@@ -0,0 +1,38 @@
+/**
+ * Layout Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createLayoutStyles = (tokens: DesignTokens) => ({
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  } as ViewStyle,
+
+  centerContainerPadded: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: tokens.spacing.xl,
+  } as ViewStyle,
+
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  } as ViewStyle,
+
+  rowBetween: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  } as ViewStyle,
+
+  rowCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/paddingStyles.ts

@@ -0,0 +1,20 @@
+/**
+ * Padding Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createPaddingStyles = (tokens: DesignTokens) => ({
+  paddedHorizontal: {
+    paddingHorizontal: tokens.spacing.lg,
+  } as ViewStyle,
+
+  paddedVertical: {
+    paddingVertical: tokens.spacing.lg,
+  } as ViewStyle,
+
+  padded: {
+    padding: tokens.spacing.lg,
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/screenContainerStyles.ts

@@ -0,0 +1,22 @@
+/**
+ * Screen Container Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createScreenContainerStyles = (tokens: DesignTokens) => ({
+  screenContainer: {
+    flex: 1,
+    backgroundColor: tokens.colors.backgroundPrimary,
+  } as ViewStyle,
+
+  flexContainer: {
+    flex: 1,
+  } as ViewStyle,
+
+  screenContainerSecondary: {
+    flex: 1,
+    backgroundColor: tokens.colors.backgroundSecondary,
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/scrollContainerStyles.ts

@@ -0,0 +1,28 @@
+/**
+ * Scroll Container Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createScrollContainerStyles = (tokens: DesignTokens) => ({
+  scrollView: {
+    flex: 1,
+  } as ViewStyle,
+
+  scrollContent: {
+    paddingHorizontal: tokens.spacing.lg,
+    paddingBottom: tokens.spacing.xl,
+  } as ViewStyle,
+
+  scrollContentGrow: {
+    flexGrow: 1,
+    padding: tokens.spacing.lg,
+  } as ViewStyle,
+
+  scrollContentCentered: {
+    flexGrow: 1,
+    padding: tokens.spacing.lg,
+    justifyContent: 'center',
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/sectionStyles.ts

@@ -0,0 +1,17 @@
+/**
+ * Section Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createSectionStyles = (tokens: DesignTokens) => ({
+  section: {
+    marginBottom: tokens.spacing.xl,
+  } as ViewStyle,
+
+  sectionPadded: {
+    marginBottom: tokens.spacing.xl,
+    paddingHorizontal: tokens.spacing.lg,
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/textStyles.ts

@@ -0,0 +1,36 @@
+/**
+ * Text Styles
+ */
+
+import type { TextStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createTextStyles = (tokens: DesignTokens) => ({
+  screenTitle: {
+    ...tokens.typography.headingLarge,
+    color: tokens.colors.textPrimary,
+    marginBottom: tokens.spacing.sm,
+  } as TextStyle,
+
+  sectionTitle: {
+    ...tokens.typography.headingMedium,
+    color: tokens.colors.textPrimary,
+    marginBottom: tokens.spacing.md,
+  } as TextStyle,
+
+  subtitle: {
+    ...tokens.typography.bodyMedium,
+    color: tokens.colors.textSecondary,
+    textAlign: 'center',
+  } as TextStyle,
+
+  bodyText: {
+    ...tokens.typography.bodyMedium,
+    color: tokens.colors.textPrimary,
+  } as TextStyle,
+
+  secondaryText: {
+    ...tokens.typography.bodySmall,
+    color: tokens.colors.textSecondary,
+  } as TextStyle,
+});

package/src/theme/hooks/useCommonStyles.ts

@@ -16,8 +16,14 @@
  */
 
 import { useMemo } from 'react';
-import type { ViewStyle, TextStyle } from 'react-native';
 import { useAppDesignTokens } from './useAppDesignTokens';
+import { createScreenContainerStyles } from './commonStyles/screenContainerStyles';
+import { createScrollContainerStyles } from './commonStyles/scrollContainerStyles';
+import { createLayoutStyles } from './commonStyles/layoutStyles';
+import { createPaddingStyles } from './commonStyles/paddingStyles';
+import { createSectionStyles } from './commonStyles/sectionStyles';
+import { createTextStyles } from './commonStyles/textStyles';
+import { createFormStyles } from './commonStyles/formStyles';
 
 /**
  * Hook to get common styles with dynamic theme support
@@ -25,224 +31,14 @@ import { useAppDesignTokens } from './useAppDesignTokens';
  */
 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,
+    ...createScreenContainerStyles(tokens),
+    ...createScrollContainerStyles(tokens),
+    ...createLayoutStyles(tokens),
+    ...createPaddingStyles(tokens),
+    ...createSectionStyles(tokens),
+    ...createTextStyles(tokens),
+    ...createFormStyles(tokens),
   }), [tokens]);
 };