chore: automated code formatting fixes via CI pipeline

Author: od-hunter

src/design-system/DESIGN_SYSTEM.md

@@ -1,9 +1,10 @@
-/**
- * SubTrackr Design System - Complete Documentation
- * 
- * This document provides comprehensive guidance on using the design system
- * for consistent, accessible, and maintainable UI development.
- */
+/\*\*
+
+- SubTrackr Design System - Complete Documentation
+-
+- This document provides comprehensive guidance on using the design system
+- for consistent, accessible, and maintainable UI development.
+  \*/
 
 # SubTrackr Design System Documentation
 
@@ -28,6 +29,7 @@ The SubTrackr Design System provides a comprehensive set of design tokens, compo
 The design system uses a semantic color system with three built-in themes:
 
 #### Dark Theme (Default)
+
 - **Primary**: #6366f1 (Indigo)
 - **Secondary**: #8b5cf6 (Purple)
 - **Accent**: #06b6d4 (Cyan)
@@ -37,9 +39,11 @@ The design system uses a semantic color system with three built-in themes:
 - **Info**: #0ea5e9 (Sky)
 
 #### Light Theme
+
 Optimized for daytime use with adjusted saturation and contrast.
 
 #### High Contrast Theme
+
 WCAG AAA compliant with 7:1 minimum contrast ratios for accessibility.
 
 ### Spacing
@@ -343,10 +347,10 @@ All components support standard accessibility props:
 
 ```typescript
 interface AccessibilityProps {
-  accessibilityLabel: string;        // Required - screen reader label
-  accessibilityHint?: string;        // Optional - additional context
-  accessibilityRole?: string;        // Optional - semantic role
-  testID?: string;                   // Optional - testing identifier
+  accessibilityLabel: string; // Required - screen reader label
+  accessibilityHint?: string; // Optional - additional context
+  accessibilityRole?: string; // Optional - semantic role
+  testID?: string; // Optional - testing identifier
 }
 ```
 
@@ -420,8 +424,8 @@ if (isIOS()) {
 
 // Conditional values
 const elevation = getPlatformValue(
-  4,    // iOS shadow
-  8,    // Android elevation
+  4, // iOS shadow
+  8, // Android elevation
   '0 2px 4px rgba(0,0,0,0.1)' // Web box-shadow
 );
 ```
@@ -493,6 +497,7 @@ npm test src/design-system
 ```
 
 Tests cover:
+
 - Component rendering
 - User interactions
 - Accessibility compliance
@@ -506,6 +511,7 @@ npm run e2e:test-android
 ```
 
 E2E tests verify:
+
 - Visual consistency across platforms
 - Theme application
 - RTL layout
@@ -531,15 +537,15 @@ const handleChange = (field: string, value: string) => {
 
 const handleSubmit = () => {
   const newErrors: Record<string, string> = {};
-  
+
   if (!isValidEmail(formData.email)) {
     newErrors.email = 'Invalid email address';
   }
-  
+
   if (!isValidAmount(formData.amount)) {
     newErrors.amount = 'Amount must be between $1-$1000';
   }
-  
+
   if (Object.keys(newErrors).length === 0) {
     // Submit form
   } else {
@@ -612,6 +618,7 @@ To migrate existing components to use the design system:
 ## Support
 
 For questions or issues with the design system:
+
 1. Check this documentation
 2. Review Storybook examples
 3. Check existing tests

src/design-system/__tests__/Button.test.tsx

@@ -13,20 +13,22 @@ describe('Button Component', () => {
   // ========================================================================
 
   it('should render with label text', () => {
-    render(
-      <Button
-        label="Click Me"
-        onPress={() => {}}
-        accessibilityLabel="Click button"
-      />
-    );
+    render(<Button label="Click Me" onPress={() => {}} accessibilityLabel="Click button" />);
 
     const button = screen.getByText('Click Me');
     expect(button).toBeTruthy();
   });
 
   it('should render all variants', () => {
-    const variants = ['primary', 'secondary', 'outline', 'ghost', 'danger', 'success', 'crypto'] as const;
+    const variants = [
+      'primary',
+      'secondary',
+      'outline',
+      'ghost',
+      'danger',
+      'success',
+      'crypto',
+    ] as const;
 
     variants.forEach((variant) => {
       const { unmount } = render(
@@ -70,13 +72,7 @@ describe('Button Component', () => {
   it('should call onPress when tapped', () => {
     const mockOnPress = jest.fn();
 
-    render(
-      <Button
-        label="Press Me"
-        onPress={mockOnPress}
-        accessibilityLabel="Press button"
-      />
-    );
+    render(<Button label="Press Me" onPress={mockOnPress} accessibilityLabel="Press button" />);
 
     const button = screen.getByText('Press Me');
     fireEvent.press(button);
@@ -105,13 +101,7 @@ describe('Button Component', () => {
   it('should handle async onPress', async () => {
     const mockOnPress = jest.fn().mockResolvedValue(undefined);
 
-    render(
-      <Button
-        label="Async Button"
-        onPress={mockOnPress}
-        accessibilityLabel="Async button"
-      />
-    );
+    render(<Button label="Async Button" onPress={mockOnPress} accessibilityLabel="Async button" />);
 
     const button = screen.getByText('Async Button');
     fireEvent.press(button);
@@ -172,12 +162,7 @@ describe('Button Component', () => {
 
   it('should display loading indicator', () => {
     render(
-      <Button
-        label="Loading"
-        onPress={() => {}}
-        loading
-        accessibilityLabel="Loading button"
-      />
+      <Button label="Loading" onPress={() => {}} loading accessibilityLabel="Loading button" />
     );
 
     // The loading indicator should be rendered
@@ -220,9 +205,10 @@ describe('Button Component', () => {
     );
 
     const button = getByTestId('full-width-button');
-    expect(button).toHaveProp('style', expect.arrayContaining([
-      expect.objectContaining({ width: '100%' }),
-    ]));
+    expect(button).toHaveProp(
+      'style',
+      expect.arrayContaining([expect.objectContaining({ width: '100%' })])
+    );
   });
 
   // ========================================================================
@@ -244,11 +230,7 @@ describe('Button Component', () => {
 
   it('should generate test ID from label', () => {
     const { getByTestId } = render(
-      <Button
-        label="Auto Test ID"
-        onPress={() => {}}
-        accessibilityLabel="Auto ID button"
-      />
+      <Button label="Auto Test ID" onPress={() => {}} accessibilityLabel="Auto ID button" />
     );
 
     expect(getByTestId('button-auto-test-id')).toBeTruthy();

src/design-system/__tests__/visualRegression.e2e.ts

@@ -1,16 +1,11 @@
 /**
  * Design System - Visual Regression Tests
- * 
+ *
  * Uses Detox for E2E visual regression testing on iOS and Android
  * Complements Jest unit tests with visual snapshots
  */
 
-import {
-  element,
-  by,
-  expect as detoxExpect,
-  waitFor,
-} from 'detox';
+import { element, by, expect as detoxExpect, waitFor } from 'detox';
 
 /**
  * Button Visual Regression Tests

src/design-system/components/Button.tsx

@@ -16,13 +16,7 @@ import {
 } from 'react-native';
 import type { ViewStyle, TextStyle } from 'react-native';
 
-import {
-  spacing,
-  borderRadius,
-  typography,
-  shadows,
-  animation,
-} from '../tokens';
+import { spacing, borderRadius, typography, shadows, animation } from '../tokens';
 import type { AccessibilityProps, ComponentSize } from '../types/design-tokens';
 
 // ============================================================================
@@ -335,9 +329,7 @@ export const Button = React.forwardRef<TouchableOpacity, ButtonProps>(
         ? themeColors.disabledBackground
         : themeColors.background,
       borderWidth: variant === 'outline' ? 1 : 0,
-      borderColor: isDisabledOrLoading
-        ? themeColors.disabledBorder
-        : themeColors.border,
+      borderColor: isDisabledOrLoading ? themeColors.disabledBorder : themeColors.border,
     };
 
     // Build text style
@@ -369,33 +361,21 @@ export const Button = React.forwardRef<TouchableOpacity, ButtonProps>(
         disabled={isDisabledOrLoading}
         activeOpacity={0.7}
         accessibilityLabel={accessibilityLabel || label}
-        accessibilityHint={
-          accessibilityHint || (disabled ? 'Button is disabled' : undefined)
-        }
+        accessibilityHint={accessibilityHint || (disabled ? 'Button is disabled' : undefined)}
         accessibilityRole={accessibilityRole}
         accessibilityState={{
           disabled: isDisabledOrLoading,
         }}
-        testID={testID}
-      >
+        testID={testID}>
         {loading && (
-          <ActivityIndicator
-            size="small"
-            color={buttonTextStyle.color}
-            style={styles.spinner}
-          />
+          <ActivityIndicator size="small" color={buttonTextStyle.color} style={styles.spinner} />
         )}
         {leftIcon && !loading && <View style={styles.withLeftIcon}>{leftIcon}</View>}
 
         <Text
-          style={[
-            textSizeStyle,
-            buttonTextStyle,
-            textStyle,
-          ]}
+          style={[textSizeStyle, buttonTextStyle, textStyle]}
           allowFontScaling
-          maxFontSizeMultiplier={1.2}
-        >
+          maxFontSizeMultiplier={1.2}>
           {label}
         </Text>
 

src/design-system/components/Card.tsx

@@ -151,12 +151,9 @@ export const Card = React.forwardRef<View, CardProps>(
 
     // Variant-specific styles
     const variantStyle: ViewStyle = {
-      backgroundColor:
-        variant === 'filled' ? theme.colors.surfaceVariant : theme.colors.surface,
+      backgroundColor: variant === 'filled' ? theme.colors.surfaceVariant : theme.colors.surface,
       borderColor:
-        variant === 'outlined' || variant === 'default'
-          ? theme.colors.border
-          : undefined,
+        variant === 'outlined' || variant === 'default' ? theme.colors.border : undefined,
     };
 
     // Padding size
@@ -194,21 +191,13 @@ export const Card = React.forwardRef<View, CardProps>(
     return (
       <View
         ref={ref}
-        style={[
-          styles.card,
-          getVariantStyles(),
-          paddingStyle,
-          variantStyle,
-          platformStyles,
-          style,
-        ]}
+        style={[styles.card, getVariantStyles(), paddingStyle, variantStyle, platformStyles, style]}
         onTouchEnd={onPress}
         accessible={!!accessibilityLabel || !!onPress}
         accessibilityLabel={accessibilityLabel}
         accessibilityRole={accessibilityRole || 'none'}
         accessibilityHint={onPress ? 'Double tap to activate' : undefined}
-        testID={testID}
-      >
+        testID={testID}>
         {children}
       </View>
     );

src/design-system/components/Input.tsx

@@ -5,13 +5,7 @@
  */
 
 import React from 'react';
-import {
-  StyleSheet,
-  View,
-  TextInput as RNTextInput,
-  Text,
-  Platform,
-} from 'react-native';
+import { StyleSheet, View, TextInput as RNTextInput, Text, Platform } from 'react-native';
 import type { ViewStyle, TextStyle, TextInputProps as RNTextInputProps } from 'react-native';
 
 import { spacing, borderRadius, typography } from '../tokens';
@@ -24,8 +18,7 @@ import type { AccessibilityProps } from '../types/design-tokens';
 export type InputVariant = 'default' | 'outline' | 'filled';
 
 export interface InputProps
-  extends Omit<RNTextInputProps, 'onChangeText' | 'onFocus' | 'onBlur'>,
-    AccessibilityProps {
+  extends Omit<RNTextInputProps, 'onChangeText' | 'onFocus' | 'onBlur'>, AccessibilityProps {
   /**
    * Input label text
    */
@@ -278,10 +271,7 @@ export const Input = React.forwardRef<RNTextInput, InputProps>(
       <View style={[styles.container, containerStyle]}>
         {label && (
           <View style={styles.labelRow}>
-            <Text
-              style={[styles.label, labelStyle]}
-              nativeID={`${inputId}-label`}
-            >
+            <Text style={[styles.label, labelStyle]} nativeID={`${inputId}-label`}>
               {label}
             </Text>
             {required && <Text style={styles.required}>*</Text>}
@@ -295,8 +285,7 @@ export const Input = React.forwardRef<RNTextInput, InputProps>(
             variant === 'filled' && styles.inputContainerFilled,
             isFocused && styles.inputContainerFocused,
             inputContainerStyle,
-          ]}
-        >
+          ]}>
           {leftIcon && <View style={styles.iconContainer}>{leftIcon}</View>}
 
           <RNTextInput
@@ -311,10 +300,7 @@ export const Input = React.forwardRef<RNTextInput, InputProps>(
             editable={!disabled}
             selectTextOnFocus={!disabled}
             accessibilityLabel={accessibilityLabel || label}
-            accessibilityHint={
-              accessibilityHint ||
-              (error ? `Error: ${error}` : helperText)
-            }
+            accessibilityHint={accessibilityHint || (error ? `Error: ${error}` : helperText)}
             accessibilityRole={accessibilityRole}
             accessibilityState={{
               disabled,
@@ -333,8 +319,7 @@ export const Input = React.forwardRef<RNTextInput, InputProps>(
           <Text
             style={[styles.errorText, helperStyle]}
             accessibilityLiveRegion="polite"
-            accessibilityRole="alert"
-          >
+            accessibilityRole="alert">
             {error || helperText}
           </Text>
         )}