feat: create scoped dependency injection component

Author: adbayb

.vscode/settings.json

@@ -14,7 +14,7 @@
 		"source.addMissingImports.ts": "explicit",
 		"source.organizeImports": "never",
 		"source.organizeLinkDefinitions": "explicit",
-		"source.removeUnused.ts": "explicit",
+		"source.removeUnused.ts": "never",
 		"source.removeUnusedImports": "explicit",
 		"source.sortImports": "never"
 	},

hosts/web/src/Main.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable import-x/no-namespace */
-import { DependencyInjection } from "@clean-architecture/shared-kernel";
 import * as Catalog from "@clean-architecture/catalog";
 
 export const Main = () => {
 	return (
-		<DependencyInjection entityGateway={new Catalog.QuoteEntityGateway()}>
+		<Catalog.DependencyInjection>
 			<Catalog.GetQuoteView />
-		</DependencyInjection>
+		</Catalog.DependencyInjection>
 	);
 };

modules/catalog/package.json

@@ -42,6 +42,7 @@
 		"vitest": "2.1.8"
 	},
 	"peerDependencies": {
+		"@clean-architecture/shared-kernel": "^0.0.0",
 		"react": "^18.0.0 || ^19.0.0"
 	}
 }

modules/catalog/src/GetQuote/frameworks/GetQuoteView.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
-import { useDependencyInjection } from "@clean-architecture/shared-kernel";
 import type { Hook } from "@clean-architecture/shared-kernel";
 
 import { GetQuoteUseCase } from "../useCases/GetQuoteUseCase";
 import type { GetQuoteViewModel } from "../adapters/GetQuoteViewModel";
 import { GetQuotePresenter } from "../adapters/GetQuotePresenter";
 import { GetQuoteController } from "../adapters/GetQuoteController";
-import type { QuoteEntityGateway } from "../../Quote";
+import { useDependencyInjection } from "../../shared/frameworks/DependencyInjection";
 
 export const GetQuoteView = () => {
 	const { controller, viewModel } = useGetQuote();
@@ -31,7 +30,7 @@ export const GetQuoteView = () => {
 };
 
 const useGetQuote: Hook<GetQuoteController, GetQuoteViewModel> = () => {
-	const { entityGateway } = useDependencyInjection<QuoteEntityGateway>();
+	const { entityGateway } = useDependencyInjection();
 	const [viewModel, setViewModel] = useState<GetQuoteViewModel>({});
 	const presenter = useMemo(() => new GetQuotePresenter(setViewModel), []);
 

modules/catalog/src/index.ts

@@ -1,2 +1,2 @@
 export { GetQuoteView } from "./GetQuote";
-export { QuoteEntityGateway } from "./Quote";
+export { DependencyInjection } from "./shared/frameworks/DependencyInjection";

modules/catalog/src/shared/frameworks/.gitkeep.dependencyInjection

@@ -0,0 +1,20 @@
+import type { PropsWithChildren } from "react";
+import {
+	DependencyInjection as SharedDependencyInjection,
+	useDependencyInjection as useSharedDependencyInjection,
+} from "@clean-architecture/shared-kernel";
+
+import { QuoteEntityGateway } from "../../Quote";
+
+type DependencyInjectionProps = PropsWithChildren;
+
+export const DependencyInjection = ({ children }: DependencyInjectionProps) => {
+	return (
+		<SharedDependencyInjection entityGateway={new QuoteEntityGateway()}>
+			{children}
+		</SharedDependencyInjection>
+	);
+};
+
+export const useDependencyInjection =
+	useSharedDependencyInjection<QuoteEntityGateway>;