Initial commit

2026-06-25 15:53:49 +03:00
commit 1bb0b7e68a
1517 changed files with 218469 additions and 0 deletions
@@ -0,0 +1,96 @@
+# Providers Layer
+
+## Table of Contents
+
+- [Providers Layer](#providers-layer)
+  - [Purpose](#purpose)
+  - [Responsibilities](#responsibilities)
+  - [Recommended Structure](#recommended-structure)
+  - [App Provider Composition](#app-provider-composition)
+  - [Example: AppProviders](#example-appproviders)
+
+## Purpose
+
+The `providers` layer is responsible for **global application context and environment configuration**.
+
+It acts as the **composition root of the application**, where all global React providers are initialized and combined.
+
+Providers make global services available across the entire application, such as:
+
+- routing
+- data fetching clients
+- theme configuration
+- authentication/session context
+- internationalization
+- notifications
+- global state management
+
+Instead of importing these providers in many places, they are **composed once and applied at the application root**.
+
+## Responsibilities
+
+The `providers` layer is responsible for:
+
+- initializing global React context providers
+- configuring global services
+- composing multiple providers into a single entry point
+- exposing the provider tree to the application root
+
+## Recommended Structure
+
+```plaintext
+providers/
+|
+| --- AppProviders.tsx       # main provider composition
+|
+| --- QueryProvider.tsx      # React Query setup
+| --- RouterProvider.tsx     # routing configuration
+| --- ThemeProvider.tsx      # theme context
+| --- AuthProvider.tsx       # authentication/session provider
+| --- I18nProvider.tsx       # internationalization provider
+|
+| --- index.ts               # re-export providers (optional)
+```
+
+## App Provider Composition
+
+Instead of wrapping the application with multiple providers manually, they are composed in a single root provider component.
+This centralizes the provider tree and simplifies application initialization.
+Example usage in the application entry point:
+
+```tsx
+import { AppProviders } from "@/providers/AppProviders";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <AppProviders>
+    <App />
+  </AppProviders>,
+);
+```
+
+### Example: AppProviders
+
+This component acts as the global application wrapper.
+
+```tsx
+import { ReactNode, FC, PropsWithChildren } from "react";
+import { QueryProvider } from "./QueryProvider";
+import { ThemeProvider } from "./ThemeProvider";
+import { AuthProvider } from "./AuthProvider";
+import { RouterProvider } from "./RouterProvider";
+import { I18nProvider } from "./I18nProvider";
+
+export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <QueryProvider>
+      <I18nProvider>
+        <AuthProvider>
+          <ThemeProvider>
+            <RouterProvider>{children}</RouterProvider>
+          </ThemeProvider>
+        </AuthProvider>
+      </I18nProvider>
+    </QueryProvider>
+  );
+};
+```