nico-tools 1.0.0 → 1.1.0

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

@@ -0,0 +1,124 @@
+import {
+  StyleSheet,
+  View,
+  Text,
+  ActivityIndicator,
+  Image,
+  Button,
+} from "react-native";
+import { useLocalSearchParams } from "expo-router";
+
+import { useAppStyles } from "@/core/design/hooks/use-app-styles";
+import { useMovieDetails } from "@/features/movies/presentation/hooks/use-movie-details";
+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 { useAddFavorite } from "@/features/favorites/presentation/hooks/use-add-favorite";
+import { useRemoveFavorite } from "@/features/favorites/presentation/hooks/use-remove-favorite";
+import { useFavorites } from "@/features/favorites/presentation/hooks/use-favorites";
+import { useRandomMovies } from "@/features/movies/presentation/hooks/use-random-movies";
+import { AppSeparator } from "@/core/design/components/app-separator";
+import { movieDetailsEntityToMovieEntity } from "@/features/movies/domain/entities/movie-details-entity";
+
+export default function MovieDetailsPage() {
+  const styles = useAppStyles(createStyles);
+  const { movieId } = useLocalSearchParams<{ movieId: string }>();
+  const { data: movieDetails, isLoading, error } = useMovieDetails(movieId);
+  const { data: favorites } = useFavorites();
+  const { mutate: addFavorite } = useAddFavorite();
+  const { mutate: removeFavorite } = useRemoveFavorite();
+
+  const isFavorite = favorites?.some((favorite) => favorite.id === movieId);
+
+  if (isLoading) {
+    return (
+      <View style={styles.centeredContainer}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.centeredContainer}>
+        <Text>Error</Text>
+      </View>
+    );
+  }
+
+  const {
+    backdrop_path,
+    title,
+    overview,
+    vote_average,
+    release_date,
+    runtime,
+  } = movieDetails!;
+
+  return (
+    <View style={styles.container}>
+      {!!backdrop_path && (
+        <Image source={{ uri: backdrop_path }} style={styles.imageBackground} />
+      )}
+      <View style={styles.content}>
+        <Text style={styles.info}>
+          {runtime}min •{" "}
+          {new Date(release_date).toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "long",
+            year: "numeric",
+          })}
+          • {vote_average.toPrecision(2)}/10
+        </Text>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.overview}>{overview}</Text>
+        <AppSeparator />
+        <Button
+          title={isFavorite ? "Supprimer des favoris" : "Ajouter aux favoris"}
+          onPress={() => {
+            if (isFavorite) {
+              removeFavorite(movieId);
+            } else {
+              const movie = movieDetailsEntityToMovieEntity(movieDetails!);
+
+              if (movie) {
+                addFavorite(movie);
+              }
+            }
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+function createStyles(colorScheme: ColorScheme) {
+  return StyleSheet.create({
+    centeredContainer: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    container: {
+      flex: 1,
+    },
+    content: {
+      padding: AppSpacing.medium,
+    },
+    imageBackground: {
+      width: "100%",
+      height: 300,
+      resizeMode: "cover",
+    },
+    info: {
+      fontSize: AppFontSize.regular,
+      color: colorScheme.textSecondary,
+    },
+    title: {
+      fontSize: AppFontSize.extraLarge,
+      fontWeight: "bold",
+      marginVertical: AppSpacing.medium,
+    },
+    overview: {},
+  });
+}

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

@@ -0,0 +1,18 @@
+import { Redirect, Stack } from "expo-router";
+import { useSession } from "@/features/auth/presentation/hooks/use-session";
+import { useTranslation } from "react-i18next";
+
+export default function PublicLayout() {
+  const { isAuthenticated } = useSession();
+  const { t } = useTranslation();
+
+  if (isAuthenticated()) {
+    return <Redirect href="/home" />;
+  }
+
+  return (
+    <Stack>
+      <Stack.Screen name="login" options={{ title: t("auth.login") }} />
+    </Stack>
+  );
+}

package/templates/react-native/expo-clean-architecture/src/app/(public)/login.tsx

@@ -0,0 +1,31 @@
+import { Button, StyleSheet, View } from "react-native";
+import { useTranslation } from "react-i18next";
+
+import { ColorScheme } from "@/core/design/@types/color-scheme";
+import { useAppStyles } from "@/core/design/hooks/use-app-styles";
+import { useSession } from "@/features/auth/presentation/hooks/use-session";
+
+export default function LoginPage() {
+  const styles = useAppStyles(createStyles);
+  const { login } = useSession();
+  const { t } = useTranslation();
+
+  return (
+    <View style={styles.container}>
+      <Button title={t("auth.login")} onPress={login} />
+    </View>
+  );
+}
+
+function createStyles(colorScheme: ColorScheme) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    text: {
+      color: colorScheme.text,
+    },
+  });
+}

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

@@ -0,0 +1,33 @@
+import i18n from "@/core/i18n";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Stack } from "expo-router";
+import { I18nextProvider } from "react-i18next";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    mutations: {
+      onError: (error) => {
+        console.log(error);
+      },
+    },
+  },
+});
+
+export default function RootLayout() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <I18nextProvider i18n={i18n}>
+        <Stack>
+          <Stack.Screen
+            name="(protected)"
+            options={{ headerShown: false, animation: "none" }}
+          />
+          <Stack.Screen
+            name="(public)"
+            options={{ headerShown: false, animation: "none" }}
+          />
+        </Stack>
+      </I18nextProvider>
+    </QueryClientProvider>
+  );
+}

package/templates/react-native/expo-clean-architecture/src/app/index.tsx

@@ -0,0 +1,8 @@
+import { useSession } from "@/features/auth/presentation/hooks/use-session";
+import { Redirect } from "expo-router";
+
+export default function Index() {
+  const { isAuthenticated } = useSession();
+
+  return <Redirect href={isAuthenticated() ? "/home" : "/login"} />;
+}

package/templates/react-native/expo-clean-architecture/src/core/constants/api-constants.ts

@@ -0,0 +1,10 @@
+export const API_CONSTANTS = {
+  baseUrl: "https://api.themoviedb.org/3",
+  token: process.env.EXPO_PUBLIC_TMDB_TOKEN,
+  movieImageBaseUrl: "https://image.tmdb.org/t/p/w500",
+  endpoints: {
+    discover: "/discover/movie",
+    search: "/search/movie",
+    movieDetails: (id: string) => `/movie/${id}`,
+  },
+};

package/templates/react-native/expo-clean-architecture/src/core/constants/image-constants.ts

@@ -0,0 +1,3 @@
+export const IMAGE_CONSTANTS = {
+  posterAspectRatio: 500 / 750,
+};

package/templates/react-native/expo-clean-architecture/src/core/constants/query-keys.ts

@@ -0,0 +1,6 @@
+export const QUERY_KEYS = {
+  FAVORITES: "favorites",
+  MOVIE_DETAILS: "movie-details",
+  RANDOM_MOVIES: "random-movies",
+  SEARCH_MOVIES: "search-movies",
+};

package/templates/react-native/expo-clean-architecture/src/core/constants/storage-keys.ts

@@ -0,0 +1,3 @@
+export const STORAGE_KEYS = {
+  FAVORITES: "favorites",
+};

package/templates/react-native/expo-clean-architecture/src/core/design/@types/color-scheme-state.ts

@@ -0,0 +1,35 @@
+import { ColorSchemeName, StatusBarStyle } from "react-native";
+import { ColorScheme } from "@/core/design/@types/color-scheme";
+
+export interface ColorSchemeState {
+  /**
+   * The current colors.
+   */
+  colorScheme: ColorScheme;
+
+  /**
+   * The current color scheme name.
+   */
+  currentColorScheme: ColorSchemeName;
+
+  /**
+   * Whether the color scheme has been initialized.
+   */
+  initialized: boolean;
+
+  /**
+   * The current status bar style.
+   */
+  statusBarStyle: StatusBarStyle;
+
+  /**
+   * Set the color scheme.
+   * @param colorSchemeName - The color scheme name to set.
+   */
+  setColorScheme: (colorSchemeName: ColorSchemeName) => void;
+
+  /**
+   * Switch to the opposite color scheme.
+   */
+  toggleColorScheme: () => void;
+}

package/templates/react-native/expo-clean-architecture/src/core/design/@types/color-scheme.ts

@@ -0,0 +1,12 @@
+/**
+ * Interface for the color scheme used in the app.
+ */
+export interface ColorScheme {
+  background: string;
+  text: string;
+  textSecondary: string;
+  danger: string;
+  success: string;
+  warning: string;
+  info: string;
+}

package/templates/react-native/expo-clean-architecture/src/core/design/components/app-icon.tsx

@@ -0,0 +1,16 @@
+import IonIcons from "@expo/vector-icons/Ionicons";
+import { useAppColorScheme } from "@/core/design/hooks/use-app-color-scheme";
+
+export const AppIcon = ({
+  name,
+  size = 24,
+  color,
+}: {
+  name: keyof typeof IonIcons.glyphMap;
+  size?: number;
+  color?: string;
+}) => {
+  const { colorScheme } = useAppColorScheme();
+
+  return <IonIcons name={name} size={size} color={color ?? colorScheme.text} />;
+};

package/templates/react-native/expo-clean-architecture/src/core/design/components/app-separator.tsx

@@ -0,0 +1,26 @@
+import { View, StyleSheet } from "react-native";
+import { useAppStyles } from "@/core/design/hooks/use-app-styles";
+import { AppSpacing } from "@/core/design/theme/app-sizes";
+
+type Props = {
+  size?: AppSpacing;
+  axis?: "horizontal" | "vertical";
+};
+
+export function AppSeparator({
+  size = AppSpacing.medium,
+  axis = "vertical",
+}: Props) {
+  const styles = useAppStyles(() => createStyles(size, axis));
+
+  return <View style={styles.separator} />;
+}
+
+function createStyles(size: AppSpacing, axis: "horizontal" | "vertical") {
+  return StyleSheet.create({
+    separator: {
+      height: axis === "vertical" ? size : null,
+      width: axis === "horizontal" ? size : null,
+    },
+  });
+}

package/templates/react-native/expo-clean-architecture/src/core/design/hooks/use-app-color-scheme.ts

@@ -0,0 +1,52 @@
+import { ColorSchemeName } from "react-native";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { darkColorScheme, lightColorScheme } from "@/core/design/theme/app-colors";
+import { ColorSchemeState } from "@/core/design/@types/color-scheme-state";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+/**
+ * Hook to manage the app's color scheme.
+ *
+ * The state is persisted locally on the user's device using `AsyncStorage`.
+ *
+ * @returns {ColorSchemeState} The current color scheme state.
+ */
+export const useAppColorScheme = create<ColorSchemeState>()(
+  persist(
+    (set) => ({
+      colorScheme: lightColorScheme,
+      initialized: false,
+      currentColorScheme: "light",
+      statusBarStyle: "light-content",
+      setColorScheme: (colorSchemeName: ColorSchemeName) => {
+        set({
+          initialized: true,
+          colorScheme:
+            colorSchemeName === "dark" ? darkColorScheme : lightColorScheme,
+          statusBarStyle:
+            colorSchemeName === "dark" ? "dark-content" : "light-content",
+          currentColorScheme: colorSchemeName,
+        });
+      },
+      toggleColorScheme: () => {
+        set((state) => ({
+          colorScheme:
+            state.currentColorScheme === "dark"
+              ? lightColorScheme
+              : darkColorScheme,
+          statusBarStyle:
+            state.currentColorScheme === "dark"
+              ? "light-content"
+              : "dark-content",
+          currentColorScheme:
+            state.currentColorScheme === "dark" ? "light" : "dark",
+        }));
+      },
+    }),
+    {
+      name: "color-scheme",
+      storage: createJSONStorage(() => AsyncStorage),
+    }
+  )
+);

package/templates/react-native/expo-clean-architecture/src/core/design/hooks/use-app-fonts.ts

@@ -0,0 +1,12 @@
+import { useFonts } from "expo-font";
+
+/**
+ * Register app fonts.
+ * @returns The fonts object
+ */
+export const useAppFonts = () => {
+  return useFonts({
+    // Example:
+    // "Poppins": require("../../../../assets/fonts/Poppins-Regular.ttf"),
+  });
+};

package/templates/react-native/expo-clean-architecture/src/core/design/hooks/use-app-styles.ts

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { useAppColorScheme } from "@/core/design/hooks/use-app-color-scheme";
+import { ColorScheme } from "@/core/design/@types/color-scheme";
+import { useHeaderHeight } from "@react-navigation/elements";
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+
+/**
+ * Use styles hook
+ * Returns a memoized styles object based on the color scheme
+ * @param styleCreator - A function that creates styles based on the color scheme
+ * @returns The styles object
+ */
+export function useAppStyles<T>(
+  styleCreator: (
+    colorScheme: ColorScheme,
+    headerHeight: number,
+    bottomTabHeight: number
+  ) => T
+) {
+  const { colorScheme } = useAppColorScheme();
+  const headerHeight = useHeaderHeight();
+  //const bottomTabHeight = useBottomTabBarHeight();
+
+  return useMemo(
+    () => styleCreator(colorScheme, headerHeight, 0),
+    [colorScheme, styleCreator, headerHeight]
+  );
+}

package/templates/react-native/expo-clean-architecture/src/core/design/theme/app-colors.ts

@@ -0,0 +1,21 @@
+import { ColorScheme } from "@/core/design/@types/color-scheme";
+
+export const lightColorScheme: ColorScheme = {
+  background: "white",
+  text: "black",
+  textSecondary: "gray",
+  danger: "red",
+  success: "green",
+  warning: "yellow",
+  info: "blue",
+};
+
+export const darkColorScheme: ColorScheme = {
+  background: "black",
+  text: "white",
+  textSecondary: "gray",
+  danger: "red",
+  success: "green",
+  warning: "yellow",
+  info: "blue",
+};

package/templates/react-native/expo-clean-architecture/src/core/design/theme/app-fonts.ts

@@ -0,0 +1,16 @@
+export enum AppFontWeight {
+  light = 300,
+  regular = 400,
+  medium = 500,
+  semibold = 600,
+  bold = 700,
+}
+
+export enum AppFontSize {
+  extraSmall = 10,
+  small = 12,
+  regular = 14,
+  medium = 16,
+  large = 20,
+  extraLarge = 24,
+}

package/templates/react-native/expo-clean-architecture/src/core/design/theme/app-sizes.ts

@@ -0,0 +1,14 @@
+export enum AppRadius {
+  square = 0,
+  rounded = 8,
+  circle = 1000,
+}
+
+export enum AppSpacing {
+  extraSmall = 4,
+  small = 8,
+  regular = 12,
+  medium = 16,
+  large = 24,
+  extraLarge = 32,
+}

package/templates/react-native/expo-clean-architecture/src/core/di/injection-container.ts

@@ -0,0 +1,53 @@
+import { Container } from "inversify";
+
+import { NetworkService } from "@/core/services/network-service";
+import { NetworkServiceImpl } from "@/core/services/network-service-impl";
+import { MonitoringService } from "@/core/services/monitoring-service";
+import { MonitoringServiceImpl } from "@/core/services/monitoring-service-impl";
+import { LocalStorageService } from "@/core/services/local-storage-service";
+import { LocalStorageServiceImpl } from "@/core/services/local-storage-service-impl";
+import { MoviesDatasource } from "@/features/movies/data/datasources/movies-datasource";
+import { MoviesDatasourceImpl } from "@/features/movies/data/datasources/movies-datasource-impl";
+import { MoviesRepository } from "@/features/movies/domain/repositories/movies-repository";
+import { MoviesRepositoryImpl } from "@/features/movies/data/repositories/movies-repository-impl";
+import { GetRandomMoviesUsecase } from "@/features/movies/domain/usecases/get-random-movies-usecase";
+import { SearchMoviesUsecase } from "@/features/movies/domain/usecases/search-movies-usecase";
+import { GetMovieDetailsUsecase } from "@/features/movies/domain/usecases/get-movie-details-usecase";
+import { FavoritesDatasource } from "@/features/favorites/data/datasources/favorites-datasource";
+import { FavoritesDatasourceImpl } from "@/features/favorites/data/datasources/favorites-datasource-impl";
+import { FavoritesRepository } from "@/features/favorites/domain/repositories/favorites-repository";
+import { FavoritesRepositoryImpl } from "@/features/favorites/data/repositories/favorites-repository-impl";
+import { GetFavoritesUsecase } from "@/features/favorites/domain/usecases/get-favorites-usecase";
+import { AddToFavoritesUsecase } from "@/features/favorites/domain/usecases/add-to-favorites-usecase";
+import { RemoveFromFavoritesUsecase } from "@/features/favorites/domain/usecases/remove-from-favorites-usecase";
+import { ClearFavoritesUsecase } from "@/features/favorites/domain/usecases/clear-favorites-usecase";
+
+const container = new Container({ defaultScope: "Singleton" });
+
+// CORE : Services
+container.bind<NetworkService>(NetworkService).to(NetworkServiceImpl);
+container.bind<MonitoringService>(MonitoringService).to(MonitoringServiceImpl);
+container
+  .bind<LocalStorageService>(LocalStorageService)
+  .to(LocalStorageServiceImpl);
+
+// FEATURE : Movies
+container.bind<MoviesRepository>(MoviesRepository).to(MoviesRepositoryImpl);
+container.bind<MoviesDatasource>(MoviesDatasource).to(MoviesDatasourceImpl);
+container.bind<GetRandomMoviesUsecase>(GetRandomMoviesUsecase).toSelf();
+container.bind<GetMovieDetailsUsecase>(GetMovieDetailsUsecase).toSelf();
+container.bind<SearchMoviesUsecase>(SearchMoviesUsecase).toSelf();
+
+// FEATURE : Favorites
+container
+  .bind<FavoritesDatasource>(FavoritesDatasource)
+  .to(FavoritesDatasourceImpl);
+container
+  .bind<FavoritesRepository>(FavoritesRepository)
+  .to(FavoritesRepositoryImpl);
+container.bind<GetFavoritesUsecase>(GetFavoritesUsecase).toSelf();
+container.bind<AddToFavoritesUsecase>(AddToFavoritesUsecase).toSelf();
+container.bind<RemoveFromFavoritesUsecase>(RemoveFromFavoritesUsecase).toSelf();
+container.bind<ClearFavoritesUsecase>(ClearFavoritesUsecase).toSelf();
+
+export default container;

package/templates/react-native/expo-clean-architecture/src/core/errors/index.ts

@@ -0,0 +1 @@
+export class UnknownError extends Error {}

package/templates/react-native/expo-clean-architecture/src/core/helpers/@types.ts

@@ -0,0 +1,23 @@
+export type RestClientOptions = {
+  baseUrl?: string;
+  headers?: Record<string, string>;
+};
+
+export type RequestConfig = {
+  path: string;
+  options?: RequestInit;
+};
+
+export type GetRequestConfig = RequestConfig & {
+  queryParameters?: Record<string, any>;
+};
+
+export type PostRequestConfig = RequestConfig & {
+  body: any;
+};
+
+export type PutRequestConfig = RequestConfig & {
+  body: any;
+};
+
+export type DeleteRequestConfig = RequestConfig;