Registry API Refactoring (#144)

* Refactor core to use a flexible registry pattern

- Introduce a new registry mechanism for mailer providers
- Extract mailer provider enum to a separate file
- Implement dynamic mailer loading using a registry
- Update package dependencies and exports
- Improve modularity and extensibility of mailer implementation

* Refactor monitoring and billing services to use a flexible registry pattern

- Introduce a shared registry mechanism for dynamic service loading
- Replace static switch-based implementations with a registry-based approach
- Update instrumentation, CMS, and monitoring services to use the new registry
- Improve modularity and extensibility of service implementations
- Add Zod-based type-safe provider validation

* Simplify async registration in monitoring and billing services

- Remove unnecessary async wrappers for no-op registrations
- Update type definitions to support both async and sync registration functions
- Standardize registration approach for Paddle and Sentry providers

* Remove Tailwind package from packages where it is not being needed

* Remove Tailwind config references from pnpm-lock.yaml

* Update instrumentation registry to support dynamic monitoring providers

- Modify type definition to use NonNullable MonitoringProvider
- Import MonitoringProvider type from get-monitoring-provider
- Enhance type safety for instrumentation registration

packages/monitoring/api/src/components/provider.tsx

@@ -2,38 +2,64 @@
 
 import { lazy } from 'react';
 
-import { getMonitoringProvider } from '../get-monitoring-provider';
-import { InstrumentationProvider } from '../monitoring-providers.enum';
+import { createRegistry } from '@kit/shared/registry';
 
-const BaselimeProvider = lazy(async () => {
+import {
+  MonitoringProvider as MonitoringProviderType,
+  getMonitoringProvider,
+} from '../get-monitoring-provider';
+
+// Define the type for our provider components
+type ProviderComponent = {
+  default: React.ComponentType<React.PropsWithChildren>;
+};
+
+// Create a registry for monitoring providers
+const monitoringProviderRegistry = createRegistry<
+  ProviderComponent,
+  NonNullable<MonitoringProviderType>
+>();
+
+// Register the Baselime provider
+monitoringProviderRegistry.register('baselime', async () => {
   const { BaselimeProvider } = await import('@kit/baselime/provider');
 
   return {
-    default: BaselimeProvider,
+    default: function BaselimeProviderWrapper({
+      children,
+    }: React.PropsWithChildren) {
+      return <BaselimeProvider enableWebVitals>{children}</BaselimeProvider>;
+    },
   };
 });
 
-const SentryProvider = lazy(async () => {
+// Register the Sentry provider
+monitoringProviderRegistry.register('sentry', async () => {
   const { SentryProvider } = await import('@kit/sentry/provider');
 
   return {
-    default: SentryProvider,
+    default: function SentryProviderWrapper({
+      children,
+    }: React.PropsWithChildren) {
+      return <SentryProvider>{children}</SentryProvider>;
+    },
   };
 });
 
+/**
+ * @name MonitoringProvider
+ * @description This component is used to wrap the application with the appropriate monitoring provider.
+ * @param props
+ * @returns
+ */
 export function MonitoringProvider(props: React.PropsWithChildren) {
   const provider = getMonitoringProvider();
 
-  switch (provider) {
-    case InstrumentationProvider.Baselime:
-      return (
-        <BaselimeProvider enableWebVitals>{props.children}</BaselimeProvider>
-      );
-
-    case InstrumentationProvider.Sentry:
-      return <SentryProvider>{props.children}</SentryProvider>;
-
-    default:
-      return <>{props.children}</>;
+  if (!provider) {
+    return <>{props.children}</>;
   }
+
+  const Provider = lazy(() => monitoringProviderRegistry.get(provider));
+
+  return <Provider>{props.children}</Provider>;
 }