feat(i18n): add i18n types, config, provider, context, and custom hook

CONTRIBUTING.md

@@ -235,32 +235,30 @@ Design patterns are reusable solutions to common problems within a given context
 
 ### Memoization Pattern
 
-  * **Concept**: A performance optimization technique to prevent unnecessary re-renders and expensive re-calculations by caching results. React provides three main tools for this.
+- **Concept**: A performance optimization technique to prevent unnecessary re-renders and expensive re-calculations by caching results. React provides three main tools for this.
 
-  * **Best For**: Improving the performance of applications with complex components, large lists, or frequent state updates.
-
-  * **The Tools**:
-
-      * **`React.memo`**: A higher-order component that prevents a component from re-rendering if its props haven't changed.
-      * **`useMemo`**: A hook that caches the result of an expensive calculation. It only re-computes the value when its dependencies change.
-      * **`useCallback`**: A hook that caches a function definition. This is useful for preventing child components from re-rendering when you pass functions down as props.
+- **Best For**: Improving the performance of applications with complex components, large lists, or frequent state updates.
 
+- **The Tools**:
+  - **`React.memo`**: A higher-order component that prevents a component from re-rendering if its props haven't changed.
+  - **`useMemo`**: A hook that caches the result of an expensive calculation. It only re-computes the value when its dependencies change.
+  - **`useCallback`**: A hook that caches a function definition. This is useful for preventing child components from re-rendering when you pass functions down as props.
 
 ### Custom Data Fetching Hook
 
-  * **Concept**: A custom hook that abstracts all the logic for fetching data from an API. It typically manages the loading, error, and data states internally.
+- **Concept**: A custom hook that abstracts all the logic for fetching data from an API. It typically manages the loading, error, and data states internally.
 
-  * **Best For**: Simplifying data fetching in your components, eliminating repetitive `useEffect` logic, and creating a consistent way to handle API requests across your app.
+- **Best For**: Simplifying data fetching in your components, eliminating repetitive `useEffect` logic, and creating a consistent way to handle API requests across your app.
 
-  * **How it looks**: Components become much cleaner and focused on displaying the data.
+- **How it looks**: Components become much cleaner and focused on displaying the data.
 
-    ```tsx
-    function UserProfile({ userId }) {
-      const { data: user, isLoading, error } = useFetch(`/api/users/${userId}`);
+  ```tsx
+  function UserProfile({ userId }) {
+    const { data: user, isLoading, error } = useFetch(`/api/users/${userId}`);
 
-      if (isLoading) return <div>Loading...</div>;
-      if (error) return <div>Error fetching data!</div>;
+    if (isLoading) return <div>Loading...</div>;
+    if (error) return <div>Error fetching data!</div>;
 
-      return <div>{user.name}</div>;
-    }
-    ```
+    return <div>{user.name}</div>;
+  }
+  ```