feat: 🔖 update react native deps and improve code structure

JeremyDolle · JeremyDolle · commit 1da94d6ec98a · 2024-10-07T16:57:58.000+02:00
diff --git a/template/src/App.tsx b/template/src/App.tsx
@@ -4,7 +4,7 @@ import { MMKV } from 'react-native-mmkv';
 
 import { ThemeProvider } from '@/theme';
 
-import ApplicationNavigator from './navigators/Application';
+import ApplicationNavigator from '@/navigations/Application';
 import './translations';
 
 export const queryClient = new QueryClient();
diff --git a/template/src/navigations/Application.tsx b/template/src/navigations/Application.tsx
@@ -0,0 +1,27 @@
+import {createStackNavigator} from '@react-navigation/stack';
+import {NavigationContainer} from '@react-navigation/native';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+
+import {Example, Startup} from '@/screens';
+import {useTheme} from '@/theme';
+import {RootStackParamList} from "@/navigations/types";
+import {Paths} from "@/navigations/paths";
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+function ApplicationNavigator() {
+	const { variant, navigationTheme } = useTheme();
+
+	return (
+		<SafeAreaProvider>
+			<NavigationContainer theme={navigationTheme}>
+				<Stack.Navigator key={variant} screenOptions={{ headerShown: false }}>
+					<Stack.Screen name={Paths.Startup} component={Startup} />
+					<Stack.Screen name={Paths.Example} component={Example} />
+				</Stack.Navigator>
+			</NavigationContainer>
+		</SafeAreaProvider>
+	);
+}
+
+export default ApplicationNavigator;
diff --git a/template/src/navigations/paths.ts b/template/src/navigations/paths.ts
@@ -0,0 +1,4 @@
+export enum Paths {
+  Startup = 'startup',
+  Example = 'example'
+}
diff --git a/template/src/navigations/types.ts b/template/src/navigations/types.ts
@@ -1,10 +1,11 @@
 import type { StackScreenProps } from '@react-navigation/stack';
+import {Paths} from "@/navigations/paths";
 
 export type RootStackParamList = {
-	Startup: undefined;
-	Example: undefined;
+  [Paths.Startup]: undefined;
+  [Paths.Example]: undefined;
 };
 
 export type RootScreenProps<
-	S extends keyof RootStackParamList = keyof RootStackParamList,
+  S extends keyof RootStackParamList = keyof RootStackParamList,
 > = StackScreenProps<RootStackParamList, S>;
diff --git a/template/src/navigators/Application.tsx b/template/src/navigators/Application.tsx
diff --git a/template/src/services/userService.ts b/template/src/services/userService.ts
@@ -0,0 +1,9 @@
+import {instance} from "@/services/instance";
+import {userSchema} from "@/types/schemas/user";
+
+export const UserServices = {
+  fetchOne: async (id: number) => {
+    const response = await instance.get(`users/${id}`).json();
+    return userSchema.parse(response);
+  }
+}
diff --git a/template/src/services/users/fetchOne.ts b/template/src/services/users/fetchOne.ts
diff --git a/template/src/services/users/index.ts b/template/src/services/users/index.ts
diff --git a/template/src/theme/ThemeProvider/ThemeProvider.tsx b/template/src/theme/ThemeProvider/ThemeProvider.tsx
@@ -16,11 +16,12 @@ import {
 	generateBorderColors,
 	generateBorderRadius,
 	generateBorderWidths,
+	staticBorderStyles
 } from '@/theme/borders';
 import layout from '@/theme/layout';
 import componentsGenerator from '@/theme/components';
-import { generateBackgrounds } from '@/theme/backgrounds';
-import { generateGutters } from '@/theme/gutters';
+import { generateBackgrounds, staticBackgroundStyles } from '@/theme/backgrounds';
+import { generateGutters, staticGutterStyles } from '@/theme/gutters';
 import generateConfig from '@/theme/ThemeProvider/generateConfig';
 
 import type { MMKV } from 'react-native-mmkv';
@@ -76,14 +77,25 @@ function ThemeProvider({ children = false, storage }: Props) {
 	}, [fullConfig]);
 
 	const backgrounds = useMemo(() => {
-		return generateBackgrounds(fullConfig);
+		return {
+			...generateBackgrounds(fullConfig),
+				...staticBackgroundStyles
+		};
+	}, [fullConfig]);
+
+	const gutters = useMemo(() => {
+		return {
+			...generateGutters(fullConfig),
+				...staticGutterStyles
+		};
 	}, [fullConfig]);
 
 	const borders = useMemo(() => {
 		return {
 			...generateBorderColors(fullConfig),
 			...generateBorderRadius(),
 			...generateBorderWidths(),
+			...staticBorderStyles,
 		};
 	}, [fullConfig]);
 
@@ -98,7 +110,7 @@ function ThemeProvider({ children = false, storage }: Props) {
 		return {
 			colors: fullConfig.colors,
 			variant,
-			gutters: generateGutters(),
+			gutters,
 			layout,
 			fonts,
 			backgrounds,
diff --git a/template/src/theme/ThemeProvider/generateConfig.ts b/template/src/theme/ThemeProvider/generateConfig.ts
@@ -1,11 +1,33 @@
 import { config } from '@/theme/_config';
-import { hasProperty } from '@/types/guards/theme';
 
 import type {
 	FulfilledThemeConfiguration,
 	Variant,
 } from '@/types/theme/config';
 
+import type { HasProperty } from '@/types/theme/common';
+
+function hasProperty<Config, KeyPath extends string>(
+	configuration: Config,
+	property: KeyPath,
+): configuration is HasProperty<Config, KeyPath> & Config {
+	const parts = property.split('.');
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let currentObj: any = configuration;
+
+	for (let i = 0; i < parts.length; i += 1) {
+		const part = parts[i];
+		if (!(part in currentObj)) {
+			return false;
+		}
+
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
+		currentObj = currentObj[part];
+	}
+
+	return true;
+}
+
 export default (variant: Variant) => {
 	const { variants, ...defaultConfig } = config;
 	const variantConfig = variant !== 'default' ? variants[variant] : null;
diff --git a/template/src/theme/_config.ts b/template/src/theme/_config.ts
@@ -58,6 +58,9 @@ export const config = {
 				background: colorsDark.purple50,
 				card: colorsDark.purple50,
 			},
+			borders: {
+				colors: colorsDark,
+			},
 		},
 	},
 } as const satisfies ThemeConfiguration;
diff --git a/template/src/theme/assets/context.d.ts b/template/src/theme/assets/context.d.ts
@@ -0,0 +1,55 @@
+// Based on https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/webpack-env/index.d.ts
+// Adds support for the runtime `require.context` method.
+// https://github.com/facebook/metro/pull/822/
+//
+// Separate file required until the types land in react-native itself:
+// https://github.com/facebook/react-native/pull/41421
+
+declare let module: NodeModule;
+
+declare namespace __MetroModuleApi {
+  interface RequireContext {
+    /** Return the keys that can be resolved. */
+    keys(): string[];
+    (id: string): unknown;
+    <T>(id: string): T;
+    /** **Unimplemented:** Readable identifier for the context module. */
+    id: string;
+    /** **Unimplemented:** Return the module identifier for a user request. */
+    resolve(id: string): string;
+  }
+
+  interface RequireFunction {
+    /**
+     * Returns the exports from a dependency. The call is sync. No request to the server is fired. The compiler ensures that the dependency is available.
+     */
+    (path: string): unknown;
+    <T>(path: string): T;
+
+    /**
+     * **Experimental:** Import all modules in a given directory. This module dynamically updates when the files in a directory are added or removed.
+     *
+     * **Enabling:** This feature can be enabled by setting the `transformer.unstable_allowRequireContext` property to `true` in your Metro configuration.
+     *
+     * @param path File path pointing to the directory to require.
+     * @param recursive Should search for files recursively. Optional, default `true` when `require.context` is used.
+     * @param filter Filename filter pattern for use in `require.context`. Optional, default `.*` (any file) when `require.context` is used.
+     * @param mode Mode for resolving dynamic dependencies. Defaults to `sync`.
+     */
+    context(
+      path: string,
+      recursive?: boolean,
+      filter?: RegExp,
+      mode?: 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once',
+    ): RequireContext;
+  }
+}
+
+/**
+ * Declare process variable
+ */
+declare namespace NodeJS {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface Require extends __MetroModuleApi.RequireFunction {}
+}
+declare let process: NodeJS.Process;
diff --git a/template/src/theme/assets/getAssetsContext.ts b/template/src/theme/assets/getAssetsContext.ts
@@ -0,0 +1,6 @@
+export type AssetType = 'images' | 'icons';
+
+export default (type: AssetType) =>
+  type === 'images'
+    ? require.context('./images', true, /\.png$/)
+    : require.context('/icons', true, /\.svg$/);
diff --git a/template/src/theme/gutters.ts b/template/src/theme/gutters.ts
@@ -1,10 +1,9 @@
-import { config } from '@/theme/_config';
-
 import type { Gutters } from '@/types/theme/gutters';
-import type { ViewStyle } from 'react-native';
+import type {UnionConfiguration} from "@/types/theme/config";
+import {type ViewStyle} from "react-native";
 
-export const generateGutters = (): Gutters => {
-	return config.gutters.reduce((acc, curr) => {
+export const generateGutters = (configuration: UnionConfiguration): Gutters => {
+	return configuration.gutters.reduce((acc, curr) => {
 		return Object.assign(acc, {
 			[`margin_${curr}`]: {
 				margin: curr,
diff --git a/template/src/translations/i18next.d.ts b/template/src/translations/i18next.d.ts
@@ -0,0 +1,26 @@
+import type { defaultNS, resources } from '@/translations';
+
+type Join<K, P> = K extends string | number
+	? P extends string | number
+		? `${K}.${P}`
+		: never
+	: never;
+
+type RecursiveKeys<T> = T extends object
+	? {
+		[K in keyof T]: T[K] extends object ? Join<K, RecursiveKeys<T[K]>> : K;
+	}[keyof T]
+	: never;
+
+type defaultTranslations = (typeof resources)['en'];
+
+export type TranslationKeys = RecursiveKeys<
+	defaultTranslations[typeof defaultNS]
+>;
+
+declare module 'i18next' {
+	interface CustomTypeOptions {
+		defaultNS: typeof defaultNS;
+		resources: frenchTraslations;
+	}
+}
diff --git a/template/src/translations/index.ts b/template/src/translations/index.ts
@@ -1,32 +1,35 @@
+import 'intl-pluralrules';
+
+import type { Language } from '@/types/schemas/language';
+
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 import * as en from './en';
 import * as fr from './fr';
 
-type TupleUnion<U extends string, R extends unknown[] = []> = {
-	[S in U]: Exclude<U, S> extends never
-		? [...R, S]
-		: TupleUnion<Exclude<U, S>, [...R, S]>;
-}[U];
-
-const ns = Object.keys(en) as TupleUnion<keyof typeof en>;
+export const defaultNS = 'my-santevet';
 
-export const defaultNS = ns[0];
+export const resources = {
+	'en-EN': en,
+	'fr-FR': fr,
+} as const satisfies Record<Language, unknown>;
 
-void i18n.use(initReactI18next).init({
-	ns,
-	defaultNS,
-	resources: {
-		en,
-		fr,
-	},
-	lng: 'en',
-	fallbackLng: 'en',
-	interpolation: {
-		escapeValue: false, // not needed for react as it escapes by default
-	},
-	compatibilityJSON: 'v3',
-});
+i18n
+	.use(initReactI18next)
+	.init({
+		defaultNS,
+		fallbackLng: 'en-EN',
+		lng: 'en-EN',
+		resources,
+	})
+	.then(() => {
+		// add capitalization formatter
+		i18n.services.formatter?.add(
+			'capitalize',
+			(value: string) =>
+				value.charAt(0).toUpperCase() + value.slice(1).toLowerCase(),
+		);
+	});
 
 export default i18n;
diff --git a/template/src/types/guards/theme.ts b/template/src/types/guards/theme.ts
diff --git a/template/src/types/i18next.d.ts b/template/src/types/i18next.d.ts
diff --git a/template/yarn.lock b/template/yarn.lock
