@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/en/ReactNative/rules/06-tooling.md

@@ -0,0 +1,281 @@
+# Tooling React Native - Expo & EAS
+
+## Introduction
+
+Ce document couvre les outils essentiels pour le développement React Native avec Expo.
+
+---
+
+## Expo CLI
+
+### Installation
+
+```bash
+# Global
+npm install -g expo-cli
+
+# Ou utiliser npx (recommandé)
+npx expo
+```
+
+### Commandes Essentielles
+
+```bash
+# Créer nouveau projet
+npx create-expo-app my-app --template
+npx create-expo-app my-app --template blank-typescript
+
+# Démarrer dev server
+npx expo start
+npx expo start --clear  # Clear cache
+npx expo start --tunnel # Expose via tunnel (LAN)
+
+# Run on specific platform
+npx expo start --ios
+npx expo start --android
+npx expo start --web
+
+# Prebuild (generate native folders)
+npx expo prebuild
+npx expo prebuild --clean
+
+# Install packages
+npx expo install expo-camera
+npx expo install --fix  # Fix version mismatches
+
+# Doctor (check setup)
+npx expo-doctor
+
+# Upgrade project
+npx expo install expo@latest
+npx expo install --fix
+```
+
+---
+
+## EAS (Expo Application Services)
+
+### Installation
+
+```bash
+npm install -g eas-cli
+eas login
+```
+
+### EAS Build
+
+```bash
+# Configure
+eas build:configure
+
+# Build iOS
+eas build --platform ios
+eas build --platform ios --profile preview
+
+# Build Android
+eas build --platform android
+eas build --platform android --profile preview
+
+# Build both
+eas build --platform all
+
+# Local build
+eas build --platform ios --local
+```
+
+### eas.json Configuration
+
+```json
+{
+  "cli": {
+    "version": ">= 5.9.1"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      },
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "preview": {
+      "distribution": "internal",
+      "ios": {
+        "simulator": false
+      },
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "production": {
+      "ios": {
+        "resourceClass": "m1-medium"
+      },
+      "android": {
+        "buildType": "aab"
+      }
+    }
+  },
+  "submit": {
+    "production": {
+      "ios": {
+        "appleId": "your-apple-id@example.com",
+        "ascAppId": "1234567890",
+        "appleTeamId": "ABCD1234"
+      },
+      "android": {
+        "serviceAccountKeyPath": "./service-account.json",
+        "track": "internal"
+      }
+    }
+  }
+}
+```
+
+### EAS Update
+
+```bash
+# Configure
+eas update:configure
+
+# Publish update
+eas update --branch production --message "Bug fixes"
+
+# View updates
+eas update:list
+```
+
+---
+
+## Metro Bundler
+
+### metro.config.js
+
+```javascript
+// Learn more: https://docs.expo.dev/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+// Add support for additional file types
+config.resolver.assetExts.push(
+  'db',
+  'mp3',
+  'ttf',
+  'obj',
+  'png',
+  'jpg'
+);
+
+// Add support for .cjs files
+config.resolver.sourceExts.push('cjs');
+
+module.exports = config;
+```
+
+### Clear Cache
+
+```bash
+# Clear Metro cache
+npx expo start --clear
+
+# Or manually
+rm -rf node_modules/.cache
+```
+
+---
+
+## Development Tools
+
+### React Native Debugger
+
+```bash
+# Install
+brew install --cask react-native-debugger
+
+# Or download from GitHub
+# https://github.com/jhen0409/react-native-debugger
+```
+
+### Flipper
+
+```bash
+# Install
+brew install --cask flipper
+
+# Plugins
+# - Network
+# - AsyncStorage
+# - React DevTools
+# - Hermes Debugger
+```
+
+### VS Code Extensions
+
+```json
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "dsznajder.es7-react-js-snippets",
+    "expo.vscode-expo-tools",
+    "bradlc.vscode-tailwindcss",
+    "prisma.prisma",
+    "gruntfuggly.todo-tree"
+  ]
+}
+```
+
+---
+
+## Package Management
+
+### npm vs yarn
+
+```bash
+# npm
+npm install
+npm install package-name
+npm install --save-dev package-name
+npm run script-name
+
+# yarn
+yarn
+yarn add package-name
+yarn add -D package-name
+yarn script-name
+
+# Prefer npm for Expo projects (better compatibility)
+```
+
+### Version Management
+
+```bash
+# Check outdated
+npm outdated
+
+# Update packages
+npx expo install --fix
+
+# Update specific package
+npx expo install expo-camera@latest
+```
+
+---
+
+## Checklist Tooling
+
+- [ ] Expo CLI installé
+- [ ] EAS CLI configuré
+- [ ] Metro config optimisé
+- [ ] Debugger choisi (RN Debugger / Flipper)
+- [ ] VS Code extensions installées
+- [ ] Package manager cohérent (npm)
+- [ ] Scripts npm configurés
+
+---
+
+**Les bons outils rendent le développement plus efficace et agréable.**

package/Dev/i18n/en/ReactNative/rules/07-testing-reactnative.md

@@ -0,0 +1,386 @@
+# Testing React Native
+
+## Introduction
+
+Les tests garantissent la qualité et la stabilité de l'application React Native.
+
+---
+
+## Types de Tests
+
+### 1. Unit Tests (Jest)
+### 2. Component Tests (React Native Testing Library)
+### 3. Integration Tests
+### 4. E2E Tests (Detox)
+
+---
+
+## Jest Configuration
+
+### jest.config.js
+
+```javascript
+module.exports = {
+  preset: 'jest-expo',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transformIgnorePatterns: [
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)',
+  ],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/*.stories.tsx',
+    '!src/**/*.test.{ts,tsx}',
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 80,
+      functions: 80,
+      lines: 80,
+      statements: 80,
+    },
+  },
+};
+```
+
+### jest.setup.js
+
+```javascript
+import '@testing-library/jest-native/extend-expect';
+
+// Mock expo modules
+jest.mock('expo-font');
+jest.mock('expo-asset');
+
+// Mock react-native modules
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+```
+
+---
+
+## Unit Tests
+
+### Testing Utilities
+
+```typescript
+// utils/formatDate.test.ts
+import { formatDate } from './formatDate';
+
+describe('formatDate', () => {
+  it('should format date correctly', () => {
+    const date = new Date('2024-01-15T10:30:00Z');
+    expect(formatDate(date)).toBe('Jan 15, 2024');
+  });
+
+  it('should handle invalid date', () => {
+    expect(() => formatDate(null as any)).toThrow();
+  });
+});
+```
+
+### Testing Services
+
+```typescript
+// services/api/users.service.test.ts
+import { usersService } from './users.service';
+import { apiClient } from '../client';
+
+jest.mock('../client');
+
+describe('UsersService', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fetch users', async () => {
+    const mockUsers = [{ id: '1', name: 'John' }];
+    (apiClient.get as jest.Mock).mockResolvedValue({ data: mockUsers });
+
+    const users = await usersService.getAll();
+
+    expect(users).toEqual(mockUsers);
+    expect(apiClient.get).toHaveBeenCalledWith('/users');
+  });
+
+  it('should handle errors', async () => {
+    (apiClient.get as jest.Mock).mockRejectedValue(new Error('Network error'));
+
+    await expect(usersService.getAll()).rejects.toThrow('Network error');
+  });
+});
+```
+
+---
+
+## Component Tests
+
+### Testing Library Setup
+
+```bash
+npm install --save-dev @testing-library/react-native @testing-library/jest-native
+```
+
+### Testing Presentational Components
+
+```typescript
+// components/Button/Button.test.tsx
+import { render, fireEvent } from '@testing-library/react-native';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('should render correctly', () => {
+    const { getByText } = render(<Button onPress={() => {}}>Click me</Button>);
+    expect(getByText('Click me')).toBeTruthy();
+  });
+
+  it('should call onPress when pressed', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(<Button onPress={onPress}>Click me</Button>);
+
+    fireEvent.press(getByText('Click me'));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be disabled when disabled prop is true', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <Button onPress={onPress} disabled>
+        Click me
+      </Button>
+    );
+
+    fireEvent.press(getByText('Click me'));
+
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});
+```
+
+### Testing Hooks
+
+```typescript
+// hooks/useCounter.test.ts
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useCounter } from './useCounter';
+
+describe('useCounter', () => {
+  it('should initialize with default value', () => {
+    const { result } = renderHook(() => useCounter());
+    expect(result.current.count).toBe(0);
+  });
+
+  it('should increment count', () => {
+    const { result } = renderHook(() => useCounter());
+
+    act(() => {
+      result.current.increment();
+    });
+
+    expect(result.current.count).toBe(1);
+  });
+
+  it('should decrement count', () => {
+    const { result } = renderHook(() => useCounter(5));
+
+    act(() => {
+      result.current.decrement();
+    });
+
+    expect(result.current.count).toBe(4);
+  });
+});
+```
+
+### Testing with React Query
+
+```typescript
+// hooks/useUsers.test.tsx
+import { renderHook, waitFor } from '@testing-library/react-native';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useUsers } from './useUsers';
+import { usersService } from '@/services/users.service';
+
+jest.mock('@/services/users.service');
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  });
+
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe('useUsers', () => {
+  it('should fetch users successfully', async () => {
+    const mockUsers = [{ id: '1', name: 'John' }];
+    (usersService.getAll as jest.Mock).mockResolvedValue(mockUsers);
+
+    const { result } = renderHook(() => useUsers(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(result.current.data).toEqual(mockUsers);
+  });
+});
+```
+
+---
+
+## E2E Tests (Detox)
+
+### Installation
+
+```bash
+npm install --save-dev detox jest
+detox init
+```
+
+### detox.config.js
+
+```javascript
+module.exports = {
+  testRunner: 'jest',
+  runnerConfig: 'e2e/config.json',
+  apps: {
+    'ios.debug': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/MyApp.app',
+      build: 'xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build',
+    },
+    'android.debug': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
+      build: 'cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug',
+    },
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: 'iPhone 14',
+      },
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'Pixel_4_API_30',
+      },
+    },
+  },
+  configurations: {
+    'ios.sim.debug': {
+      device: 'simulator',
+      app: 'ios.debug',
+    },
+    'android.emu.debug': {
+      device: 'emulator',
+      app: 'android.debug',
+    },
+  },
+};
+```
+
+### E2E Test Example
+
+```typescript
+// e2e/login.test.ts
+describe('Login Flow', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('should show login screen', async () => {
+    await expect(element(by.id('login-screen'))).toBeVisible();
+  });
+
+  it('should login successfully with valid credentials', async () => {
+    await element(by.id('email-input')).typeText('user@example.com');
+    await element(by.id('password-input')).typeText('password123');
+    await element(by.id('login-button')).tap();
+
+    await expect(element(by.id('home-screen'))).toBeVisible();
+  });
+
+  it('should show error with invalid credentials', async () => {
+    await element(by.id('email-input')).typeText('wrong@example.com');
+    await element(by.id('password-input')).typeText('wrongpassword');
+    await element(by.id('login-button')).tap();
+
+    await expect(element(by.text('Invalid credentials'))).toBeVisible();
+  });
+});
+```
+
+---
+
+## Test Organization
+
+```
+__tests__/
+├── unit/
+│   ├── utils/
+│   │   └── formatDate.test.ts
+│   └── services/
+│       └── users.service.test.ts
+├── integration/
+│   └── hooks/
+│       └── useUsers.test.tsx
+└── components/
+    ├── Button.test.tsx
+    └── UserCard.test.tsx
+
+e2e/
+├── login.test.ts
+├── navigation.test.ts
+└── profile.test.ts
+```
+
+---
+
+## Coverage
+
+```bash
+# Run tests with coverage
+npm test -- --coverage
+
+# View coverage report
+open coverage/lcov-report/index.html
+```
+
+---
+
+## Best Practices
+
+1. **Test behavior, not implementation**
+2. **Use data-testid for E2E**
+3. **Mock external dependencies**
+4. **Keep tests isolated**
+5. **Use descriptive test names**
+
+---
+
+## Checklist Testing
+
+- [ ] Jest configuré
+- [ ] Testing Library installé
+- [ ] Tests unitaires pour utils
+- [ ] Tests composants UI
+- [ ] Tests hooks customs
+- [ ] Tests integration (React Query)
+- [ ] E2E Detox configuré
+- [ ] Coverage > 80%
+
+---
+
+**Les tests ne sont pas optionnels, ils sont essentiels.**