@umituz/react-native-design-system 1.0.0

package/src/presentation/tokens/commonStyles.ts

@@ -0,0 +1,253 @@
+/**
+ * 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, loading screens, 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/tokens/core/BaseTokens.ts

@@ -0,0 +1,394 @@
+/**
+ * BASE DESIGN TOKENS - SINGLE SOURCE OF TRUTH
+ *
+ * ✅ STATIC tokens that don't change with theme
+ * ✅ DRY Principle - Each value defined ONCE
+ * ✅ Type-safe with full TypeScript support
+ * ✅ Factory-first design for 100+ generated apps
+ *
+ * @module BaseTokens
+ */
+
+import { TextStyle } from 'react-native';
+
+// =============================================================================
+// SPACING TOKENS
+// =============================================================================
+
+export const spacing = {
+  // Base spacing scale
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  xxxl: 64,
+
+  // Component-specific spacing
+  screenPadding: 20,
+  cardPadding: 16,
+  buttonPadding: 16,
+  inputPadding: 8,
+  sectionSpacing: 24,
+
+  // Icon sizes
+  iconSizeSmall: 16,
+  iconSizeMedium: 20,
+  iconSizeLarge: 24,
+  iconSizeXLarge: 32,
+  iconSizeHero: 64,
+
+  // Component heights
+  buttonHeight: 48,
+  inputHeight: 48,
+  appBarHeight: 56,
+  tabBarHeight: 60,
+} as const;
+
+// =============================================================================
+// TYPOGRAPHY TOKENS
+// =============================================================================
+
+export const typography = {
+  // Font families
+  fontPrimary: 'System',
+  fontSecondary: 'System',
+  fontMono: 'Courier New',
+
+  // Font sizes
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  xxl: 24,
+  xxxl: 32,
+
+  // Font weights
+  light: '300' as const,
+  regular: '400' as const,
+  medium: '500' as const,
+  semibold: '600' as const,
+  bold: '700' as const,
+
+  // Line heights
+  lineHeightTight: 1.2,
+  lineHeightNormal: 1.5,
+  lineHeightRelaxed: 1.7,
+
+  // =============================================================================
+  // MATERIAL DESIGN 3 TYPE SCALE
+  // =============================================================================
+
+  // Display styles (largest)
+  displayLarge: {
+    fontSize: 57,
+    fontWeight: '400' as const,
+    lineHeight: 64,
+  } as TextStyle,
+
+  displayMedium: {
+    fontSize: 45,
+    fontWeight: '400' as const,
+    lineHeight: 52,
+  } as TextStyle,
+
+  displaySmall: {
+    fontSize: 36,
+    fontWeight: '400' as const,
+    lineHeight: 44,
+  } as TextStyle,
+
+  // Headline styles
+  headlineLarge: {
+    fontSize: 32,
+    fontWeight: '400' as const,
+    lineHeight: 40,
+  } as TextStyle,
+
+  headlineMedium: {
+    fontSize: 28,
+    fontWeight: '400' as const,
+    lineHeight: 36,
+  } as TextStyle,
+
+  headlineSmall: {
+    fontSize: 24,
+    fontWeight: '400' as const,
+    lineHeight: 32,
+  } as TextStyle,
+
+  // Title styles
+  titleLarge: {
+    fontSize: 22,
+    fontWeight: '400' as const,
+    lineHeight: 28,
+  } as TextStyle,
+
+  titleMedium: {
+    fontSize: 16,
+    fontWeight: '500' as const,
+    lineHeight: 24,
+  } as TextStyle,
+
+  titleSmall: {
+    fontSize: 14,
+    fontWeight: '500' as const,
+    lineHeight: 20,
+  } as TextStyle,
+
+  // Body styles
+  bodyLarge: {
+    fontSize: 18,
+    fontWeight: '400' as const,
+    lineHeight: 27,
+  } as TextStyle,
+
+  bodyMedium: {
+    fontSize: 16,
+    fontWeight: '400' as const,
+    lineHeight: 24,
+  } as TextStyle,
+
+  bodySmall: {
+    fontSize: 14,
+    fontWeight: '400' as const,
+    lineHeight: 21,
+  } as TextStyle,
+
+  // Label styles
+  labelLarge: {
+    fontSize: 16,
+    fontWeight: '500' as const,
+    lineHeight: 19.2,
+  } as TextStyle,
+
+  labelMedium: {
+    fontSize: 14,
+    fontWeight: '500' as const,
+    lineHeight: 16.8,
+  } as TextStyle,
+
+  labelSmall: {
+    fontSize: 12,
+    fontWeight: '500' as const,
+    lineHeight: 14.4,
+  } as TextStyle,
+
+  // =============================================================================
+  // LEGACY SUPPORT (backwards compatibility)
+  // =============================================================================
+
+  headingLarge: {
+    fontSize: 32,
+    fontWeight: '700' as const,
+    lineHeight: 38.4,
+  } as TextStyle,
+
+  headingMedium: {
+    fontSize: 24,
+    fontWeight: '600' as const,
+    lineHeight: 28.8,
+  } as TextStyle,
+
+  headingSmall: {
+    fontSize: 20,
+    fontWeight: '600' as const,
+    lineHeight: 24,
+  } as TextStyle,
+
+  button: {
+    fontSize: 16,
+    fontWeight: '600' as const,
+    lineHeight: 19.2,
+  } as TextStyle,
+
+  caption: {
+    fontSize: 12,
+    fontWeight: '400' as const,
+    lineHeight: 18,
+  } as TextStyle,
+
+  overline: {
+    fontSize: 12,
+    fontWeight: '500' as const,
+    lineHeight: 18,
+    textTransform: 'uppercase' as const,
+    letterSpacing: 1,
+  } as TextStyle,
+} as const;
+
+// =============================================================================
+// ANIMATION TOKENS
+// =============================================================================
+
+export const animations = {
+  // Duration scale (milliseconds)
+  fastest: 150,
+  fast: 150,
+  normal: 300,
+  slow: 500,
+  slower: 750,
+  slowest: 1000,
+
+  // Easing functions
+  easeInOut: 'ease-in-out' as const,
+  easeIn: 'ease-in' as const,
+  easeOut: 'ease-out' as const,
+  linear: 'linear' as const,
+} as const;
+
+// =============================================================================
+// OPACITY TOKENS
+// =============================================================================
+
+export const opacity = {
+  disabled: 0.6,
+  subtle: 0.8,
+  medium: 0.5,
+  light: 0.3,
+  veryLight: 0.1,
+} as const;
+
+// =============================================================================
+// BORDER TOKENS
+// =============================================================================
+
+export const borders = {
+  // Radius scale
+  radius: {
+    none: 0,
+    xs: 2,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    xxl: 24,
+    full: 9999,
+  },
+
+  // Width scale
+  width: {
+    none: 0,
+    thin: 1,
+    medium: 2,
+    thick: 4,
+  },
+
+  // Component-specific borders (without colors - colors injected by TokenFactory)
+  button: {
+    borderRadius: 8,
+    borderWidth: 0,
+  },
+
+  card: {
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+
+  input: {
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+
+  pill: {
+    borderRadius: 9999,
+    borderWidth: 0,
+  },
+} as const;
+
+// =============================================================================
+// COMPONENT SIZES (Touch Targets, Buttons, UI Elements)
+// =============================================================================
+
+export const sizes = {
+  // Touch targets (Apple HIG minimum: 44x44)
+  touchTarget: 44,
+  touchTargetSmall: 36,
+  touchTargetLarge: 56,
+
+  // Button heights
+  buttonHeight: {
+    sm: 40,
+    md: 48,
+    lg: 56,
+    xl: 64,
+  },
+
+  // Pagination dots (onboarding, carousels)
+  dot: {
+    inactive: 8,
+    active: 24,
+  },
+
+  // Progress bars
+  progressBar: {
+    thin: 2,
+    normal: 4,
+    thick: 6,
+  },
+
+  // Common UI element sizes
+  divider: 1,
+  separator: 2,
+} as const;
+
+// =============================================================================
+// ICON SIZES
+// =============================================================================
+
+export const iconSizes = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+  xxl: 40,
+} as const;
+
+// =============================================================================
+// AVATAR SIZES
+// =============================================================================
+
+export const avatarSizes = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64,
+  xxl: 80,
+} as const;
+
+// =============================================================================
+// CONSOLIDATED STATIC TOKENS
+// =============================================================================
+
+/**
+ * All static design tokens in one place
+ * These values DON'T change with theme (light/dark)
+ */
+export const BASE_TOKENS = {
+  spacing,
+  typography,
+  animations,
+  opacity,
+  borders,
+  sizes,
+  iconSizes,
+  avatarSizes,
+} as const;
+
+// =============================================================================
+// TYPE EXPORTS
+// =============================================================================
+
+export type Spacing = typeof spacing;
+export type Typography = typeof typography;
+export type Animations = typeof animations;
+export type Opacity = typeof opacity;
+export type Borders = typeof borders;
+export type Sizes = typeof sizes;
+export type IconSizes = typeof iconSizes;
+export type AvatarSizes = typeof avatarSizes;
+export type BaseTokens = typeof BASE_TOKENS;