Replace system provide with composables (#7668)

packages/shared/src/composables/index.ts

@@ -1 +1,2 @@
 export * from './use-layout-state';
+export * from './use-system';

packages/shared/src/composables/use-system.ts

@@ -0,0 +1,19 @@
+import { inject } from 'vue';
+import { AxiosInstance } from 'axios';
+import { API_INJECT, STORES_INJECT } from '../constants';
+
+export function useStores(): Record<string, any> {
+	const stores = inject<Record<string, any>>(STORES_INJECT);
+
+	if (!stores) throw new Error('[useStores]: This function has to be used inside a Directus extension.');
+
+	return stores;
+}
+
+export function useApi(): AxiosInstance {
+	const api = inject<AxiosInstance>(API_INJECT);
+
+	if (!api) throw new Error('[useApi]: This function has to be used inside a Directus extension.');
+
+	return api;
+}

packages/shared/src/constants/index.ts

@@ -1,3 +1,4 @@
 export * from './extensions';
 export * from './fields';
+export * from './injection';
 export * from './symbols';

packages/shared/src/constants/injection.ts

@@ -0,0 +1,2 @@
+export const STORES_INJECT = 'stores';
+export const API_INJECT = 'api';