nico-tools 1.0.0 → 1.1.0

package/templates/react-native/expo-clean-architecture/docs/01-architecture.md

@@ -0,0 +1,107 @@
+# Architecture
+
+---
+
+## Sommaire
+
+- [Introduction](#introduction)
+- [Stack technique](#stack-technique)
+- [Injection de dépendances](#injection-de-dependances)
+- [Structure](#structure)
+- [Ressources utiles](#ressources-utiles)
+
+---
+
+## Introduction
+
+Le projet est développé avec [React Native](https://reactnative.dev/) et [Expo](https://expo.dev/), et suit les principes de [Clean Architecture]("TODO-Add-Link") en adoptant une approche **feature-based**.
+
+L'application utilise le file-based routing de [Expo Router](https://docs.expo.dev/router/introduction/) afin de gérer la navigation entre les différents écrans. De ce fait, les écrans sont définis directement dans le dossier `src/app`.
+
+Chaque fonctionnalité est encapsulée dans un dossier dédié dans le dossier `src/features` afin d'améliorer la lisibilité et la maintenabilité du code.
+
+Les élements communs (constantes, utilitaires etc.) sont regroupés dans le dossier `src/core`.
+
+---
+
+## Stack technique
+
+### Langage
+
+- TypeScript
+
+### Librairies clés
+
+- [React Native](https://reactnative.dev/)
+- [Expo](https://expo.dev/)
+- [Expo Router](https://docs.expo.dev/router/introduction/) : gestion de la navigation entre les écrans, **file-based routing**.
+- [@tanstack/react-query](https://tanstack.com/query/latest) : gestion d'état global serveur et caching de requêtes asynchrones
+- [zustand](https://zustand.docs.pmnd.rs/) : gestion d'état global applicatif (authentification, configuration, etc.)
+- [Inversify](https://github.com/inversify/InversifyJS) : gestion de l'injection de dépendances
+- [@react-native-firebase/crashlytics](https://rnfirebase.io/) : monitoring des erreurs et crashs
+- [react-i18next](https://react.i18next.com/) : gestion de l'internationalisation
+
+---
+
+## Structure
+
+Chaque feature est systématiquement divisée en 3 couches :
+
+### La couche "data"
+
+Le dossier `data` est responsable de la **récupération des données** à partir de sources externes (API REST, base de données, etc.) ou internes (stockage local, données statiques).
+
+Il se découpe de la manière suivante :
+
+- `datasources` :
+  - Contient les abstractions et implémentations des sources de données.
+- `models` :
+  - Contient les interfaces des modèles de données telles que retournées par les _datasources_.
+  - Ces interfaces se contentent simplement de **typer** les données brutes, sans transformation supplémentaire.
+- `repositories` :
+  - Contient les implémentations des _repositories_ définis dans la couche _domain_.
+
+### La couche "domain"
+
+Le dossier `domain` est responsable de la **logique métier** de l'application. Il regroupe l'ensemble des règles, entités et cas d'utilisation nécessaire au bon fonctionnement de la feature concernée.
+
+Il se découpe de la manière suivante :
+
+- `entities` :
+  - Contient les interfaces des données telles qu'elles sont utilisées dans l'application (à la différence des _models_ de la couche _data_, elles ne sont pas limitées aux données brutes).
+- `usecases` :
+  - Contient les cas d'utilisation de la feature.
+  - Exemples : ajouter/supprimer un favori, récupérer une liste de films etc.
+- `repositories` :
+  - Contient les interfaces des _repositories_ implémentés dans la couche _data_.
+
+**Point importants** :
+
+- La couche _domain_ ne doit dépendre d'aucune autre couche (ni _data_, ni _presentation_) et être indépendante toute librairie externe. Cela permet un meilleur testabilité et maintenabilité du code sur le long terme.
+
+### La couche "presentation"
+
+Le dossier `presentation` est responsable de l'**interface utilisateur** de la feature. Il contient les composants UI et le fonctions de state management.
+
+Il se découpe de la manière suivante :
+
+- `components` :
+  - Contient les composants UI de la feature.
+- `hooks` :
+  - Contient les hooks de la feature.
+
+### Injection de dépendances
+
+**L’injection de dépendances** (DI) est un principe clé dans cette architecture, utilisé pour découpler les composants et rendre le code plus **modulaire**, **testable** et **maintenable**.
+
+[Inversify](https://github.com/inversify/InversifyJS) est utilisé pour gérer la DI. Cela signifie que les dépendances (comme les _repositories_, _datasources_, ou _usecases_) ne sont pas instanciées directement dans les classes qui les utilisent, mais injectées depuis un conteneur central.
+
+Par exemple, un **usecase** de la couche **domain** n’instancie pas lui-même un repository : il le reçoit via son constructeur, ce qui permet de facilement remplacer une implémentation par une autre (ex : un mock pour les tests).
+
+---
+
+## Ressources utiles
+
+- [Article de Yield Studio sur la Clean Architecture](https://www.yieldstudio.fr/blog/clean-architecture-comment-structurer-votre-app-pour-eviter-la-dette-demain) : les concepts abordés reflètent bien le fonctionnement choisi sur ce projet, bien que pas 100% identique et nécessairement adapté à React Native.
+- [Explication des principes SOLID](https://www.digitalocean.com/community/conceptual-articles/s-o-l-i-d-the-first-five-principles-of-object-oriented-design#single-responsibility-principle)
+- [TDD Clean Architecture par Resocoder](https://resocoder.com/flutter-clean-architecture-tdd/) : base sur laquelle s'est largement inspiré le projet. Le TDD porte cependant sur un projet Flutter, mais les concepts sont identiques.

package/templates/react-native/expo-clean-architecture/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "{{APP_SLUG}}",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "clean": "rm -rf ios android",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "collectCoverage": true,
+    "setupFiles": [
+      "./tests/setup.ts"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}",
+      "!src/**/*.d.ts",
+      "!src/**/*.stories.{ts,tsx}",
+      "!src/**/*.test.{ts,tsx}",
+      "!src/**/index.{ts,tsx}"
+    ]
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.1.0",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-firebase/app": "^22.2.0",
+    "@react-native-firebase/crashlytics": "^22.2.0",
+    "@react-navigation/bottom-tabs": "^7.3.12",
+    "@react-navigation/native": "^7.1.8",
+    "@tanstack/react-query": "^5.75.2",
+    "expo": "^53.0.7",
+    "expo-blur": "~14.1.4",
+    "expo-constants": "~17.1.5",
+    "expo-font": "~13.3.1",
+    "expo-haptics": "~14.1.4",
+    "expo-linking": "~7.1.4",
+    "expo-network": "~7.1.5",
+    "expo-router": "~5.0.5",
+    "expo-splash-screen": "~0.30.8",
+    "expo-status-bar": "~2.2.3",
+    "expo-symbols": "~0.4.4",
+    "expo-system-ui": "~5.0.7",
+    "expo-web-browser": "~14.1.6",
+    "i18next": "^25.0.2",
+    "inversify": "^7.5.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-i18next": "^15.5.1",
+    "react-native": "0.79.2",
+    "react-native-gesture-handler": "~2.25.0",
+    "react-native-json-tree": "^1.5.0",
+    "react-native-reanimated": "~3.17.5",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.10.0",
+    "react-native-web": "^0.20.0",
+    "react-native-webview": "13.13.5",
+    "zustand": "^5.0.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@types/jest": "^29.5.14",
+    "@types/react": "~19.1.2",
+    "babel-plugin-transform-typescript-metadata": "^0.3.2",
+    "jest": "^29.7.0",
+    "jest-expo": "~53.0.4",
+    "reflect-metadata": "^0.2.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3",
+    "expo-build-properties": "~0.14.6"
+  },
+  "private": true
+}

package/templates/react-native/expo-clean-architecture/scripts/clean-src.sh

@@ -0,0 +1,48 @@
+#!/bin/bash
+
+# Script to clean empty files and directories in the src directory
+# Usage: ./clean-src.sh
+
+# Exit on any error
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Check if src directory exists
+if [ ! -d "src" ]; then
+    echo -e "${RED}Error: src directory not found${NC}"
+    exit 1
+fi
+
+echo -e "${YELLOW}Starting cleanup of empty files and directories in src/...${NC}"
+
+# Count of removed items
+removed_files=0
+removed_dirs=0
+
+# Find and remove empty files
+while IFS= read -r -d '' file; do
+    if [ ! -s "$file" ]; then
+        echo "Removing empty file: $file"
+        rm "$file"
+        ((removed_files++))
+    fi
+done < <(find src -type f -print0)
+
+# Find and remove empty directories (from deepest to root)
+while IFS= read -r -d '' dir; do
+    if [ -z "$(ls -A "$dir")" ]; then
+        echo "Removing empty directory: $dir"
+        rmdir "$dir"
+        ((removed_dirs++))
+    fi
+done < <(find src -type d -depth -print0)
+
+# Print summary
+echo -e "\n${GREEN}Cleanup completed!${NC}"
+echo -e "Removed ${removed_files} empty files"
+echo -e "Removed ${removed_dirs} empty directories"

package/templates/react-native/expo-clean-architecture/scripts/generate-feature.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+
+# Script de génération d'une nouvelle feature
+
+# Prompt pour demander à l'utilisateur le nom de la feature à créer
+read -p "Entrez le nom de la feature à créer : " feature_name
+
+# Convertir le nom en PascalCase pour les noms de fichiers
+feature_name_pascal=$(echo "$feature_name" | sed -E 's/(^|_)([a-z])/\U\2/g')
+
+# Vérifier si la feature existe déjà
+if [ -d "src/features/$feature_name" ]; then
+    echo "❌ La feature '$feature_name' existe déjà !"
+    exit 1
+fi
+
+# Créer le dossier principal de la feature
+mkdir -p "src/features/$feature_name"
+
+# Créer les dossiers et fichiers de la feature
+directories=(
+    "@types"
+    "data/datasources"
+    "data/repositories"
+    "data/models"
+    "domain/entities"
+    "domain/usecases"
+    "domain/repositories"
+    "presentation/pages"
+    "presentation/components"
+    "presentation/hooks"
+)
+
+# Créer tous les dossiers
+for dir in "${directories[@]}"; do
+    mkdir -p "src/features/$feature_name/$dir"
+done
+
+echo "✅ Feature '$feature_name' créée avec succès !"
+echo "📁 Structure créée dans src/features/$feature_name"

package/templates/react-native/expo-clean-architecture/src/app/(protected)/(tabs)/_layout.tsx

@@ -0,0 +1,42 @@
+import { Tabs } from "expo-router";
+import { AppIcon } from "@/core/design/components/app-icon";
+import { useSearchMovies } from "@/features/movies/presentation/hooks/use-search-movies";
+
+export default function TabsLayout() {
+  const { mutate: searchMovies } = useSearchMovies();
+
+  return (
+    <Tabs>
+      <Tabs.Screen
+        name="home"
+        options={({ route }) => ({
+          title: "Accueil",
+          tabBarIcon: ({ focused, color }) => (
+            <AppIcon name={focused ? "home" : "home-outline"} color={color} />
+          ),
+        })}
+      />
+      <Tabs.Screen
+        name="favorites"
+        options={({ route }) => ({
+          title: "Favoris",
+          tabBarIcon: ({ focused, color }) => (
+            <AppIcon name={focused ? "star" : "star-outline"} color={color} />
+          ),
+        })}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={({ route }) => ({
+          title: "Paramètres",
+          tabBarIcon: ({ focused, color }) => (
+            <AppIcon
+              name={focused ? "settings" : "settings-outline"}
+              color={color}
+            />
+          ),
+        })}
+      />
+    </Tabs>
+  );
+}

package/templates/react-native/expo-clean-architecture/src/app/(protected)/(tabs)/favorites.tsx

@@ -0,0 +1,72 @@
+import { useLayoutEffect } from "react";
+import { StyleSheet, FlatList, TouchableOpacity, Alert } from "react-native";
+import { useNavigation } from "expo-router";
+
+import { AppSeparator } from "@/core/design/components/app-separator";
+import { AppSpacing } from "@/core/design/theme/app-sizes";
+import { useAppStyles } from "@/core/design/hooks/use-app-styles";
+import { useFavorites } from "@/features/favorites/presentation/hooks/use-favorites";
+import { FavoritesCard } from "@/features/favorites/presentation/components/favorites-card";
+import { useClearFavorites } from "@/features/favorites/presentation/hooks/use-clear-favorites";
+import { AppIcon } from "@/core/design/components/app-icon";
+import { Colors } from "react-native/Libraries/NewAppScreen";
+import { useAppColorScheme } from "@/core/design/hooks/use-app-color-scheme";
+
+export default function FavoritesPage() {
+  const navigation = useNavigation();
+
+  const styles = useAppStyles(createStyles);
+  const { colorScheme } = useAppColorScheme();
+  const { data: favorites } = useFavorites();
+  const { mutate: clearFavorites } = useClearFavorites();
+
+  const confirmAndClearFavorites = () => {
+    Alert.alert(
+      "Supprimer tous les favoris",
+      "Voulez-vous vraiment supprimer tous les favoris ?",
+      [
+        { text: "Annuler", style: "cancel" },
+        {
+          text: "Supprimer",
+          style: "destructive",
+          onPress: () => clearFavorites(),
+        },
+      ]
+    );
+  };
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={confirmAndClearFavorites}
+          style={{ marginRight: AppSpacing.medium }}
+        >
+          <AppIcon name="trash-outline" size={24} color={colorScheme.danger} />
+        </TouchableOpacity>
+      ),
+    });
+  }, []);
+
+  return (
+    <FlatList
+      contentContainerStyle={styles.container}
+      style={styles.list}
+      ItemSeparatorComponent={() => <AppSeparator />}
+      data={favorites}
+      renderItem={({ item }) => <FavoritesCard movie={item} />}
+    />
+  );
+}
+
+function createStyles() {
+  return StyleSheet.create({
+    container: {
+      padding: AppSpacing.medium,
+    },
+    list: {
+      flex: 1,
+      width: "100%",
+    },
+  });
+}

package/templates/react-native/expo-clean-architecture/src/app/(protected)/(tabs)/home.tsx

@@ -0,0 +1,122 @@
+import { useLayoutEffect } from "react";
+import {
+  ActivityIndicator,
+  Button,
+  FlatList,
+  NativeSyntheticEvent,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  TextInputSubmitEditingEventData,
+  View,
+} from "react-native";
+import { useNavigation } from "expo-router";
+
+import { useAppStyles } from "@/core/design/hooks/use-app-styles";
+import { AppSpacing } from "@/core/design/theme/app-sizes";
+import { AppFontSize } from "@/core/design/theme/app-fonts";
+import { ColorScheme } from "@/core/design/@types/color-scheme";
+import { useRandomMovies } from "@/features/movies/presentation/hooks/use-random-movies";
+import { MovieTile } from "@/features/movies/presentation/components/movie-tile";
+import { useSearchMovies } from "@/features/movies/presentation/hooks/use-search-movies";
+
+export default function HomePage() {
+  const navigation = useNavigation();
+
+  const {
+    data: randomMovies,
+    isLoading: isLoadingRandomMovies,
+    isError: isRandomMoviesError,
+    refetch: refetchRandomMovies,
+    isRefetching: isRefetchingRandomMovies,
+  } = useRandomMovies();
+
+  const {
+    mutate: searchMovies,
+    data: searchResults,
+    isPending: isSearching,
+    isError: isSearchError,
+    variables,
+    reset: resetSearch,
+  } = useSearchMovies();
+
+  const styles = useAppStyles(createStyles);
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerSearchBarOptions: {
+        placeholder: "Rechercher un film",
+        onSubmitEditing: (
+          e: NativeSyntheticEvent<TextInputSubmitEditingEventData>
+        ) => {
+          searchMovies(e.nativeEvent.text);
+        },
+      },
+    });
+  }, [searchResults]);
+
+  if (isLoadingRandomMovies || isSearching) {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (isRandomMoviesError || isSearchError) {
+    return (
+      <View style={styles.container}>
+        <Text>Error</Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlatList
+      ListHeaderComponent={() =>
+        searchResults?.length &&
+        searchResults.length > 0 && (
+          <View style={styles.searchResultsHeader}>
+            <Text style={styles.searchResultsHeaderText}>
+              {searchResults.length} résultat
+              {searchResults.length > 1 ? "s" : ""} pour : "{variables}"
+            </Text>
+            <Button title="Effacer" onPress={resetSearch} />
+          </View>
+        )
+      }
+      refreshControl={
+        <RefreshControl
+          onRefresh={refetchRandomMovies}
+          refreshing={isRefetchingRandomMovies}
+        />
+      }
+      numColumns={3}
+      data={searchResults || randomMovies}
+      renderItem={({ item }) => <MovieTile movie={item} />}
+      keyExtractor={(item) => item.id}
+    />
+  );
+}
+
+const createStyles = (colorScheme: ColorScheme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    flatList: {
+      flex: 1,
+    },
+    searchResultsHeader: {
+      padding: AppSpacing.medium,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+    },
+    searchResultsHeaderText: {
+      fontSize: AppFontSize.small,
+      color: colorScheme.textSecondary,
+    },
+  });

package/templates/react-native/expo-clean-architecture/src/app/(protected)/(tabs)/settings/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from "expo-router";
+
+export default function SettingsLayout() {
+  return <Stack screenOptions={{ headerShown: false }} />;
+}

package/templates/react-native/expo-clean-architecture/src/app/(protected)/(tabs)/settings/index.tsx

@@ -0,0 +1,29 @@
+import { Button, StyleSheet, View } from "react-native";
+import { useSession } from "@/features/auth/presentation/hooks/use-session";
+import { useAppStyles } from "@/core/design/hooks/use-app-styles";
+import { router } from "expo-router";
+import { AppSeparator } from "@/core/design/components/app-separator";
+
+export default function SettingsPage() {
+  const { logout } = useSession();
+
+  const styles = useAppStyles(createStyles);
+
+  return (
+    <View style={styles.container}>
+      <Button title="Profil" onPress={() => router.push("/settings/profile")} />
+      <AppSeparator />
+      <Button title="Déconnexion" onPress={logout} />
+    </View>
+  );
+}
+
+function createStyles() {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+  });
+}

package/templates/react-native/expo-clean-architecture/src/app/(protected)/(tabs)/settings/profile.tsx

@@ -0,0 +1,22 @@
+import { View, Text, StyleSheet  } from "react-native";
+import { useAppStyles } from "@/core/design/hooks/use-app-styles";
+
+export default function ProfilePage() {
+  const styles = useAppStyles(createStyles);
+
+  return (
+    <View style={styles.container}>
+      <Text>Profile</Text>
+    </View>
+  );
+}
+
+function createStyles() {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+  });
+}

package/templates/react-native/expo-clean-architecture/src/app/(protected)/_layout.tsx

@@ -0,0 +1,20 @@
+import { Redirect, Stack } from "expo-router";
+import { useSession } from "@/features/auth/presentation/hooks/use-session";
+
+export default function ProtectedLayout() {
+  const { isAuthenticated } = useSession();
+
+  if (!isAuthenticated()) {
+    return <Redirect href="/login" />;
+  }
+
+  return (
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen
+        name="details"
+        options={{ headerShown: false, presentation: "modal" }}
+      />
+    </Stack>
+  );
+}