cad-workflow 1.1.0

package/src/stacks/mobile/skills/clean-hexa-mobile/SKILL.md

@@ -0,0 +1,984 @@
+---
+name: clean-hexa-mobile
+description: Clean Architecture Hexagonale pour React Native Expo. Patterns, exemples et templates pour structurer une app mobile.
+---
+
+# Clean Hexa Mobile - React Native Expo
+
+## Principes fondamentaux
+
+1. **Domain au centre** : Entités pures TypeScript, zéro dépendance React/Expo
+2. **Use Cases = Custom Hooks** : Orchestration de la logique métier via hooks
+3. **Injection via Context** : Pas de singletons, testabilité maximale
+4. **Séparation Smart/Dumb** : Components présentationnels purs et réutilisables
+5. **Ports & Adapters** : Interfaces dans le domain, implémentations dans infrastructure
+
+## Structure de dossiers
+
+```
+src/
+├── domain/                     # Coeur métier - AUCUNE dépendance externe
+│   ├── entities/               # Objets métier avec identité
+│   │   └── todo.entity.ts
+│   ├── value-objects/          # Objets immuables sans identité
+│   │   └── todo-title.vo.ts
+│   ├── ports/                  # Interfaces (contrats)
+│   │   └── todo.repository.port.ts
+│   └── errors/                 # Erreurs métier typées
+│       └── todo-not-found.error.ts
+├── application/                # Orchestration
+│   ├── use-cases/              # Custom hooks métier
+│   │   ├── get-all-todos.use-case.ts
+│   │   ├── get-all-todos.use-case.test.ts
+│   │   ├── create-todo.use-case.ts
+│   │   └── create-todo.use-case.test.ts
+│   ├── dtos/                   # Data Transfer Objects
+│   │   ├── todo.dto.ts
+│   │   └── create-todo.dto.ts
+│   └── mappers/                # Conversions Entity <-> DTO
+│       └── todo.mapper.ts
+├── infrastructure/             # Implémentations techniques
+│   ├── adapters/               # Implémentations des ports
+│   │   ├── api-todo.adapter.ts
+│   │   └── api-todo.adapter.test.ts
+│   ├── persistence/            # Stockage local
+│   │   └── async-storage-todo.adapter.ts
+│   ├── di/                     # Dependency Injection
+│   │   └── container.tsx
+│   └── services/               # Services externes
+│       └── api.client.ts
+└── presentation/               # Interface utilisateur
+    ├── components/
+    │   ├── smart/              # Connectés aux use cases
+    │   │   └── todo-list.container.tsx
+    │   └── dumb/               # Props only, purs
+    │       ├── todo-item.component.tsx
+    │       └── todo-item.component.test.tsx
+    └── hooks/                  # Hooks UI (theme, navigation, etc.)
+        └── use-theme.ts
+
+app/                            # Expo Router - Routes uniquement
+├── _layout.tsx                 # Root layout + providers
+├── index.tsx                   # Home screen
+├── (tabs)/
+│   ├── _layout.tsx
+│   └── todos.tsx
+└── todo/
+    └── [id].tsx
+```
+
+## Règle des dépendances
+
+Les imports vont TOUJOURS vers le centre :
+
+```
+presentation → application → domain ← infrastructure
+      ↓              ↓           ↑
+      └──────────────┴───────────┘
+```
+
+- presentation importe application
+- application importe domain
+- infrastructure importe domain (pour implémenter les ports)
+- presentation importe infrastructure (pour le DI container)
+- domain n'importe JAMAIS rien d'externe
+- application n'importe JAMAIS infrastructure
+
+## Patterns détaillés
+
+### 1. Entity (Domain)
+
+```typescript
+// domain/entities/todo.entity.ts
+
+export interface TodoProps {
+  id: string;
+  title: string;
+  completed: boolean;
+  createdAt: Date;
+}
+
+export class Todo {
+  public readonly id: string;
+  public readonly title: string;
+  public readonly completed: boolean;
+  public readonly createdAt: Date;
+
+  private constructor(props: TodoProps) {
+    this.id = props.id;
+    this.title = props.title;
+    this.completed = props.completed;
+    this.createdAt = props.createdAt;
+  }
+
+  static create(title: string): Todo {
+    if (!title || title.trim().length === 0) {
+      throw new Error('Todo title cannot be empty');
+    }
+    return new Todo({
+      id: crypto.randomUUID(),
+      title: title.trim(),
+      completed: false,
+      createdAt: new Date(),
+    });
+  }
+
+  static fromProps(props: TodoProps): Todo {
+    return new Todo(props);
+  }
+
+  complete(): Todo {
+    return new Todo({ ...this, completed: true });
+  }
+
+  uncomplete(): Todo {
+    return new Todo({ ...this, completed: false });
+  }
+
+  updateTitle(newTitle: string): Todo {
+    if (!newTitle || newTitle.trim().length === 0) {
+      throw new Error('Todo title cannot be empty');
+    }
+    return new Todo({ ...this, title: newTitle.trim() });
+  }
+}
+```
+
+### 2. Port (Domain)
+
+```typescript
+// domain/ports/todo.repository.port.ts
+
+import { Todo } from '../entities/todo.entity';
+
+export interface ITodoRepository {
+  findAll(): Promise<Todo[]>;
+  findById(id: string): Promise<Todo | null>;
+  save(todo: Todo): Promise<void>;
+  update(todo: Todo): Promise<void>;
+  delete(id: string): Promise<void>;
+}
+```
+
+### 3. Domain Error
+
+```typescript
+// domain/errors/todo-not-found.error.ts
+
+export class TodoNotFoundError extends Error {
+  constructor(id: string) {
+    super(`Todo with id "${id}" not found`);
+    this.name = 'TodoNotFoundError';
+  }
+}
+```
+
+### 4. DTO (Application)
+
+```typescript
+// application/dtos/todo.dto.ts
+
+export interface TodoDto {
+  id: string;
+  title: string;
+  completed: boolean;
+  createdAt: string;
+}
+
+export interface CreateTodoDto {
+  title: string;
+}
+
+export interface UpdateTodoDto {
+  title?: string;
+  completed?: boolean;
+}
+```
+
+### 5. Mapper (Application)
+
+```typescript
+// application/mappers/todo.mapper.ts
+
+import { Todo } from '@/domain/entities/todo.entity';
+import { TodoDto } from '../dtos/todo.dto';
+
+export class TodoMapper {
+  static toDto(entity: Todo): TodoDto {
+    return {
+      id: entity.id,
+      title: entity.title,
+      completed: entity.completed,
+      createdAt: entity.createdAt.toISOString(),
+    };
+  }
+
+  static toDtoList(entities: Todo[]): TodoDto[] {
+    return entities.map(this.toDto);
+  }
+
+  static toEntity(dto: TodoDto): Todo {
+    return Todo.fromProps({
+      id: dto.id,
+      title: dto.title,
+      completed: dto.completed,
+      createdAt: new Date(dto.createdAt),
+    });
+  }
+}
+```
+
+### 6. Use Case Hook (Application)
+
+```typescript
+// application/use-cases/get-all-todos.use-case.ts
+
+import { useState, useCallback } from 'react';
+import { ITodoRepository } from '@/domain/ports/todo.repository.port';
+import { TodoDto } from '../dtos/todo.dto';
+import { TodoMapper } from '../mappers/todo.mapper';
+
+interface UseGetAllTodosState {
+  todos: TodoDto[];
+  loading: boolean;
+  error: Error | null;
+}
+
+interface UseGetAllTodosReturn extends UseGetAllTodosState {
+  execute: () => Promise<void>;
+  reset: () => void;
+}
+
+export const useGetAllTodos = (repository: ITodoRepository): UseGetAllTodosReturn => {
+  const [state, setState] = useState<UseGetAllTodosState>({
+    todos: [],
+    loading: false,
+    error: null,
+  });
+
+  const execute = useCallback(async () => {
+    setState(prev => ({ ...prev, loading: true, error: null }));
+    try {
+      const entities = await repository.findAll();
+      const dtos = TodoMapper.toDtoList(entities);
+      setState({ todos: dtos, loading: false, error: null });
+    } catch (error) {
+      setState(prev => ({ ...prev, loading: false, error: error as Error }));
+    }
+  }, [repository]);
+
+  const reset = useCallback(() => {
+    setState({ todos: [], loading: false, error: null });
+  }, []);
+
+  return { ...state, execute, reset };
+};
+```
+
+```typescript
+// application/use-cases/create-todo.use-case.ts
+
+import { useState, useCallback } from 'react';
+import { ITodoRepository } from '@/domain/ports/todo.repository.port';
+import { Todo } from '@/domain/entities/todo.entity';
+import { CreateTodoDto, TodoDto } from '../dtos/todo.dto';
+import { TodoMapper } from '../mappers/todo.mapper';
+
+interface UseCreateTodoState {
+  createdTodo: TodoDto | null;
+  loading: boolean;
+  error: Error | null;
+  success: boolean;
+}
+
+interface UseCreateTodoReturn extends UseCreateTodoState {
+  execute: (dto: CreateTodoDto) => Promise<void>;
+  reset: () => void;
+}
+
+export const useCreateTodo = (repository: ITodoRepository): UseCreateTodoReturn => {
+  const [state, setState] = useState<UseCreateTodoState>({
+    createdTodo: null,
+    loading: false,
+    error: null,
+    success: false,
+  });
+
+  const execute = useCallback(async (dto: CreateTodoDto) => {
+    setState(prev => ({ ...prev, loading: true, error: null, success: false }));
+    try {
+      const entity = Todo.create(dto.title);
+      await repository.save(entity);
+      const todoDto = TodoMapper.toDto(entity);
+      setState({ createdTodo: todoDto, loading: false, error: null, success: true });
+    } catch (error) {
+      setState(prev => ({ ...prev, loading: false, error: error as Error, success: false }));
+    }
+  }, [repository]);
+
+  const reset = useCallback(() => {
+    setState({ createdTodo: null, loading: false, error: null, success: false });
+  }, []);
+
+  return { ...state, execute, reset };
+};
+```
+
+### 7. Use Case Test
+
+```typescript
+// application/use-cases/get-all-todos.use-case.test.ts
+
+import { renderHook, act, waitFor } from '@testing-library/react-native';
+import { useGetAllTodos } from './get-all-todos.use-case';
+import { ITodoRepository } from '@/domain/ports/todo.repository.port';
+import { Todo } from '@/domain/entities/todo.entity';
+
+describe('useGetAllTodos', () => {
+  const createMockRepository = (): jest.Mocked<ITodoRepository> => ({
+    findAll: jest.fn(),
+    findById: jest.fn(),
+    save: jest.fn(),
+    update: jest.fn(),
+    delete: jest.fn(),
+  });
+
+  it('should return empty array initially', () => {
+    const mockRepo = createMockRepository();
+    const { result } = renderHook(() => useGetAllTodos(mockRepo));
+
+    expect(result.current.todos).toEqual([]);
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('should fetch todos successfully', async () => {
+    const mockRepo = createMockRepository();
+    const mockTodos = [
+      Todo.fromProps({ id: '1', title: 'Test 1', completed: false, createdAt: new Date() }),
+      Todo.fromProps({ id: '2', title: 'Test 2', completed: true, createdAt: new Date() }),
+    ];
+    mockRepo.findAll.mockResolvedValue(mockTodos);
+
+    const { result } = renderHook(() => useGetAllTodos(mockRepo));
+
+    await act(async () => {
+      await result.current.execute();
+    });
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.todos).toHaveLength(2);
+    expect(result.current.error).toBeNull();
+    expect(mockRepo.findAll).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle error', async () => {
+    const mockRepo = createMockRepository();
+    const error = new Error('Network error');
+    mockRepo.findAll.mockRejectedValue(error);
+
+    const { result } = renderHook(() => useGetAllTodos(mockRepo));
+
+    await act(async () => {
+      await result.current.execute();
+    });
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.error).toBe(error);
+    expect(result.current.todos).toEqual([]);
+  });
+});
+```
+
+### 8. Adapter (Infrastructure)
+
+```typescript
+// infrastructure/adapters/api-todo.adapter.ts
+
+import { ITodoRepository } from '@/domain/ports/todo.repository.port';
+import { Todo } from '@/domain/entities/todo.entity';
+import { apiClient } from '../services/api.client';
+
+interface ApiTodoResponse {
+  id: string;
+  title: string;
+  completed: boolean;
+  createdAt: string;
+}
+
+export class ApiTodoAdapter implements ITodoRepository {
+  async findAll(): Promise<Todo[]> {
+    const response = await apiClient.get<ApiTodoResponse[]>('/todos');
+    return response.map(item => Todo.fromProps({
+      id: item.id,
+      title: item.title,
+      completed: item.completed,
+      createdAt: new Date(item.createdAt),
+    }));
+  }
+
+  async findById(id: string): Promise<Todo | null> {
+    try {
+      const response = await apiClient.get<ApiTodoResponse>(`/todos/${id}`);
+      return Todo.fromProps({
+        id: response.id,
+        title: response.title,
+        completed: response.completed,
+        createdAt: new Date(response.createdAt),
+      });
+    } catch {
+      return null;
+    }
+  }
+
+  async save(todo: Todo): Promise<void> {
+    await apiClient.post('/todos', {
+      id: todo.id,
+      title: todo.title,
+      completed: todo.completed,
+      createdAt: todo.createdAt.toISOString(),
+    });
+  }
+
+  async update(todo: Todo): Promise<void> {
+    await apiClient.put(`/todos/${todo.id}`, {
+      title: todo.title,
+      completed: todo.completed,
+    });
+  }
+
+  async delete(id: string): Promise<void> {
+    await apiClient.delete(`/todos/${id}`);
+  }
+}
+```
+
+```typescript
+// infrastructure/persistence/in-memory-todo.adapter.ts
+
+import { ITodoRepository } from '@/domain/ports/todo.repository.port';
+import { Todo } from '@/domain/entities/todo.entity';
+
+export class InMemoryTodoAdapter implements ITodoRepository {
+  private todos: Map<string, Todo> = new Map();
+
+  async findAll(): Promise<Todo[]> {
+    return Array.from(this.todos.values());
+  }
+
+  async findById(id: string): Promise<Todo | null> {
+    return this.todos.get(id) ?? null;
+  }
+
+  async save(todo: Todo): Promise<void> {
+    this.todos.set(todo.id, todo);
+  }
+
+  async update(todo: Todo): Promise<void> {
+    if (!this.todos.has(todo.id)) {
+      throw new Error(`Todo ${todo.id} not found`);
+    }
+    this.todos.set(todo.id, todo);
+  }
+
+  async delete(id: string): Promise<void> {
+    this.todos.delete(id);
+  }
+
+  // Helper pour les tests
+  clear(): void {
+    this.todos.clear();
+  }
+
+  seed(todos: Todo[]): void {
+    todos.forEach(todo => this.todos.set(todo.id, todo));
+  }
+}
+```
+
+### 9. API Client (Infrastructure)
+
+```typescript
+// infrastructure/services/api.client.ts
+
+const API_BASE_URL = process.env.EXPO_PUBLIC_API_URL || 'http://localhost:3000/api';
+
+class ApiClient {
+  private baseUrl: string;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl;
+  }
+
+  private async request<T>(endpoint: string, options?: RequestInit): Promise<T> {
+    const url = `${this.baseUrl}${endpoint}`;
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`API Error: ${response.status} ${response.statusText}`);
+    }
+
+    return response.json();
+  }
+
+  async get<T>(endpoint: string): Promise<T> {
+    return this.request<T>(endpoint, { method: 'GET' });
+  }
+
+  async post<T>(endpoint: string, data: unknown): Promise<T> {
+    return this.request<T>(endpoint, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async put<T>(endpoint: string, data: unknown): Promise<T> {
+    return this.request<T>(endpoint, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async delete<T>(endpoint: string): Promise<T> {
+    return this.request<T>(endpoint, { method: 'DELETE' });
+  }
+}
+
+export const apiClient = new ApiClient(API_BASE_URL);
+```
+
+### 10. Container DI (Infrastructure)
+
+```typescript
+// infrastructure/di/container.tsx
+
+import React, { createContext, useContext, useMemo, ReactNode } from 'react';
+import { ITodoRepository } from '@/domain/ports/todo.repository.port';
+import { ApiTodoAdapter } from '../adapters/api-todo.adapter';
+import { InMemoryTodoAdapter } from '../persistence/in-memory-todo.adapter';
+
+interface Container {
+  todoRepository: ITodoRepository;
+}
+
+const ContainerContext = createContext<Container | null>(null);
+
+interface ContainerProviderProps {
+  children: ReactNode;
+  overrides?: Partial<Container>;
+}
+
+export const ContainerProvider: React.FC<ContainerProviderProps> = ({
+  children,
+  overrides
+}) => {
+  const container = useMemo<Container>(() => ({
+    todoRepository: overrides?.todoRepository ?? new ApiTodoAdapter(),
+  }), [overrides]);
+
+  return (
+    <ContainerContext.Provider value={container}>
+      {children}
+    </ContainerContext.Provider>
+  );
+};
+
+export const useContainer = (): Container => {
+  const container = useContext(ContainerContext);
+  if (!container) {
+    throw new Error('useContainer must be used within a ContainerProvider');
+  }
+  return container;
+};
+
+// Hooks raccourcis pour chaque dépendance
+export const useTodoRepository = (): ITodoRepository => {
+  return useContainer().todoRepository;
+};
+
+// Provider pour les tests avec mocks
+export const TestContainerProvider: React.FC<ContainerProviderProps> = ({
+  children,
+  overrides
+}) => {
+  const container = useMemo<Container>(() => ({
+    todoRepository: overrides?.todoRepository ?? new InMemoryTodoAdapter(),
+  }), [overrides]);
+
+  return (
+    <ContainerContext.Provider value={container}>
+      {children}
+    </ContainerContext.Provider>
+  );
+};
+```
+
+### 11. Smart Component (Presentation)
+
+```typescript
+// presentation/components/smart/todo-list.container.tsx
+
+import React, { useEffect, useCallback } from 'react';
+import { View, StyleSheet, RefreshControl } from 'react-native';
+import { useTodoRepository } from '@/infrastructure/di/container';
+import { useGetAllTodos } from '@/application/use-cases/get-all-todos.use-case';
+import { useDeleteTodo } from '@/application/use-cases/delete-todo.use-case';
+import { useToggleTodo } from '@/application/use-cases/toggle-todo.use-case';
+import { TodoList } from '../dumb/todo-list.component';
+import { LoadingSpinner } from '../dumb/loading-spinner.component';
+import { ErrorMessage } from '../dumb/error-message.component';
+import { EmptyState } from '../dumb/empty-state.component';
+
+export const TodoListContainer: React.FC = () => {
+  const repository = useTodoRepository();
+  const { todos, loading, error, execute: fetchTodos } = useGetAllTodos(repository);
+  const { execute: deleteTodo } = useDeleteTodo(repository);
+  const { execute: toggleTodo } = useToggleTodo(repository);
+
+  useEffect(() => {
+    fetchTodos();
+  }, [fetchTodos]);
+
+  const handleToggle = useCallback(async (id: string) => {
+    await toggleTodo(id);
+    await fetchTodos();
+  }, [toggleTodo, fetchTodos]);
+
+  const handleDelete = useCallback(async (id: string) => {
+    await deleteTodo(id);
+    await fetchTodos();
+  }, [deleteTodo, fetchTodos]);
+
+  if (loading && todos.length === 0) {
+    return <LoadingSpinner />;
+  }
+
+  if (error) {
+    return <ErrorMessage message={error.message} onRetry={fetchTodos} />;
+  }
+
+  if (todos.length === 0) {
+    return <EmptyState message="No todos yet. Create one!" />;
+  }
+
+  return (
+    <View style={styles.container}>
+      <TodoList
+        todos={todos}
+        onToggle={handleToggle}
+        onDelete={handleDelete}
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={fetchTodos} />
+        }
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+```
+
+### 12. Dumb Components (Presentation)
+
+```typescript
+// presentation/components/dumb/todo-list.component.tsx
+
+import React, { memo, ReactElement } from 'react';
+import { FlatList, StyleSheet, RefreshControl } from 'react-native';
+import { TodoDto } from '@/application/dtos/todo.dto';
+import { TodoItem } from './todo-item.component';
+
+interface TodoListProps {
+  todos: TodoDto[];
+  onToggle: (id: string) => void;
+  onDelete: (id: string) => void;
+  refreshControl?: ReactElement<typeof RefreshControl>;
+}
+
+export const TodoList: React.FC<TodoListProps> = memo(({
+  todos,
+  onToggle,
+  onDelete,
+  refreshControl
+}) => {
+  return (
+    <FlatList
+      data={todos}
+      keyExtractor={(item) => item.id}
+      renderItem={({ item }) => (
+        <TodoItem
+          todo={item}
+          onToggle={onToggle}
+          onDelete={onDelete}
+        />
+      )}
+      refreshControl={refreshControl}
+      contentContainerStyle={styles.content}
+    />
+  );
+});
+
+TodoList.displayName = 'TodoList';
+
+const styles = StyleSheet.create({
+  content: {
+    padding: 16,
+  },
+});
+```
+
+```typescript
+// presentation/components/dumb/todo-item.component.tsx
+
+import React, { memo, useCallback } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { TodoDto } from '@/application/dtos/todo.dto';
+
+interface TodoItemProps {
+  todo: TodoDto;
+  onToggle: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+export const TodoItem: React.FC<TodoItemProps> = memo(({ todo, onToggle, onDelete }) => {
+  const handleToggle = useCallback(() => {
+    onToggle(todo.id);
+  }, [onToggle, todo.id]);
+
+  const handleDelete = useCallback(() => {
+    onDelete(todo.id);
+  }, [onDelete, todo.id]);
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={handleToggle}
+        style={styles.checkbox}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: todo.completed }}
+        accessibilityLabel={`Mark ${todo.title} as ${todo.completed ? 'incomplete' : 'complete'}`}
+      >
+        <View style={[styles.checkboxInner, todo.completed && styles.checked]} />
+      </Pressable>
+
+      <Text style={[styles.title, todo.completed && styles.completedTitle]}>
+        {todo.title}
+      </Text>
+
+      <Pressable
+        onPress={handleDelete}
+        style={styles.deleteButton}
+        accessibilityRole="button"
+        accessibilityLabel={`Delete ${todo.title}`}
+      >
+        <Text style={styles.deleteText}>x</Text>
+      </Pressable>
+    </View>
+  );
+});
+
+TodoItem.displayName = 'TodoItem';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    marginBottom: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: '#007AFF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  checkboxInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  checked: {
+    backgroundColor: '#007AFF',
+  },
+  title: {
+    flex: 1,
+    fontSize: 16,
+    color: '#333',
+  },
+  completedTitle: {
+    textDecorationLine: 'line-through',
+    color: '#999',
+  },
+  deleteButton: {
+    padding: 8,
+  },
+  deleteText: {
+    fontSize: 24,
+    color: '#FF3B30',
+    fontWeight: 'bold',
+  },
+});
+```
+
+```typescript
+// presentation/components/dumb/todo-item.component.test.tsx
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { TodoItem } from './todo-item.component';
+import { TodoDto } from '@/application/dtos/todo.dto';
+
+describe('TodoItem', () => {
+  const mockTodo: TodoDto = {
+    id: '1',
+    title: 'Test Todo',
+    completed: false,
+    createdAt: new Date().toISOString(),
+  };
+
+  it('should render todo title', () => {
+    const { getByText } = render(
+      <TodoItem todo={mockTodo} onToggle={jest.fn()} onDelete={jest.fn()} />
+    );
+
+    expect(getByText('Test Todo')).toBeTruthy();
+  });
+
+  it('should call onToggle when checkbox pressed', () => {
+    const onToggle = jest.fn();
+    const { getByRole } = render(
+      <TodoItem todo={mockTodo} onToggle={onToggle} onDelete={jest.fn()} />
+    );
+
+    fireEvent.press(getByRole('checkbox'));
+    expect(onToggle).toHaveBeenCalledWith('1');
+  });
+
+  it('should call onDelete when delete button pressed', () => {
+    const onDelete = jest.fn();
+    const { getByLabelText } = render(
+      <TodoItem todo={mockTodo} onToggle={jest.fn()} onDelete={onDelete} />
+    );
+
+    fireEvent.press(getByLabelText('Delete Test Todo'));
+    expect(onDelete).toHaveBeenCalledWith('1');
+  });
+
+  it('should apply completed styles when todo is completed', () => {
+    const completedTodo = { ...mockTodo, completed: true };
+    const { getByText } = render(
+      <TodoItem todo={completedTodo} onToggle={jest.fn()} onDelete={jest.fn()} />
+    );
+
+    const titleElement = getByText('Test Todo');
+    expect(titleElement.props.style).toContainEqual(
+      expect.objectContaining({ textDecorationLine: 'line-through' })
+    );
+  });
+});
+```
+
+### 13. Expo Router Layout
+
+```typescript
+// app/_layout.tsx
+
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { ContainerProvider } from '@/infrastructure/di/container';
+
+export default function RootLayout() {
+  return (
+    <ContainerProvider>
+      <StatusBar style="auto" />
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: '#007AFF' },
+          headerTintColor: '#fff',
+          headerTitleStyle: { fontWeight: 'bold' },
+        }}
+      />
+    </ContainerProvider>
+  );
+}
+```
+
+```typescript
+// app/index.tsx
+
+import { SafeAreaView, StyleSheet } from 'react-native';
+import { Stack } from 'expo-router';
+import { TodoListContainer } from '@/presentation/components/smart/todo-list.container';
+
+export default function HomeScreen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Stack.Screen options={{ title: 'My Todos' }} />
+      <TodoListContainer />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+});
+```
+
+## Checklist Clean Hexa Mobile
+
+Avant de valider ton code, vérifie :
+
+### Domain
+- [ ] Aucun import React/Expo dans domain/
+- [ ] Entities immuables avec méthodes qui retournent de nouvelles instances
+- [ ] Validation dans les factories (static create)
+- [ ] Ports = interfaces TypeScript pures
+
+### Application
+- [ ] Use cases = custom hooks
+- [ ] Dépendances injectées en paramètre du hook
+- [ ] États: loading, error, data, success
+- [ ] Tests avec mocks des ports
+
+### Infrastructure
+- [ ] Adapters implémentent les ports
+- [ ] Container avec React Context
+- [ ] Pas de singletons exportés directement
+- [ ] Tests des adapters
+
+### Presentation
+- [ ] Smart components connectent use cases aux dumb
+- [ ] Dumb components = props only + memo
+- [ ] FlatList pour les listes (pas ScrollView)
+- [ ] Accessibilité (accessibilityLabel, accessibilityRole)
+- [ ] Tests des dumb components