refactor: replace React.ComponentType with React.FC as things changed…

… with TS 5.1 and React 18

.changeset/honest-ways-wave.md

@@ -0,0 +1,7 @@
+---
+"@consent-manager/interface-default": patch
+"@consent-manager/core": patch
+"docs": patch
+---
+
+Replace React.ComponentType with React.FC as things changed with React 18 and TS 5.1

packages/core/src/components/ConsentManagerForm.tsx

@@ -8,7 +8,7 @@ import {
 } from './DecisionsForm'
 
 export interface ConsentManagerFormProps {
-  formComponent?: React.ComponentType<DecisionsFormProps>
+  formComponent?: React.FC<DecisionsFormProps>
   [key: string]: unknown
 }
 

packages/core/src/config.ts

@@ -20,9 +20,9 @@ export interface IntegrationConfig {
   color?: string
   contrastColor?: string
   privacyPolicyUrl?: string
-  Icon: React.ComponentType<IntegrationIconComponentProps>
+  Icon: React.FC<IntegrationIconComponentProps>
   pageViewEventHandler?: PageViewEventTrigger
-  WrapperComponent?: React.ComponentType
+  WrapperComponent?: React.FC
   options?: IntegrationConfigOptions
   enabledByDefault?: boolean
 }

packages/core/src/context.ts

@@ -7,7 +7,7 @@ import {
 import { ConsentManagerStore } from './storage'
 
 interface ConsentManagerContextValue {
-  fallbackComponent: React.ComponentType<FallbackComponentProps>
+  fallbackComponent: React.FC<FallbackComponentProps>
   config: ConsentManagerConfig
   store: ConsentManagerStore
 }

packages/core/src/index.tsx

@@ -15,7 +15,7 @@ import { FallbackComponent } from './components/FallbackComponent'
 
 export interface ConsentManagerProps {
   config: ConsentManagerConfig
-  fallbackComponent?: React.ComponentType<FallbackComponentProps>
+  fallbackComponent?: React.FC<FallbackComponentProps>
   store: ConsentManagerStore
   children: React.ReactNode
 }
@@ -57,7 +57,7 @@ export function useDecision(
   ]
 }
 
-export function useFallbackComponent(): React.ComponentType<FallbackComponentProps> {
+export function useFallbackComponent(): React.FC<FallbackComponentProps> {
   const { fallbackComponent: FallbackComponent } = useContext(
     ConsentManagerContext
   )

packages/docs/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};
+}

packages/docs/docs/about.md

@@ -1,7 +1,7 @@
 ---
 id: about
 title: What is Consent Manager?
-slug: "/"
+slug: '/'
 ---
 
 import { YoutubeVideo } from '../src/components/youtube-video'
@@ -44,4 +44,4 @@ We specialize in React because it's our strength and passion. But we're excited
 
 Ready to make your website GDPR-compliant? Our Quick Start guide is your first step towards a safer, privacy-focused online presence. In just a few minutes, you can set the foundation for a more secure and respectful user experience. Let's get started!
 
-[Start your journey with Consent Manager](./quick-start.md)
+[Start your journey with Consent Manager](./quick-start.md)

packages/docs/docs/configuration.md

@@ -43,9 +43,9 @@ Each integration used within the `ConsentManagerConfig` must conform to the foll
 | `color`                | `string`                   | Optional. The primary color associated with the integration.    |
 | `contrastColor`        | `string`                   | Optional. A contrasting color for better visibility.            |
 | `privacyPolicyUrl`     | `string`                   | URL to the privacy policy of the integration.                   |
-| `Icon`                 | `React.ComponentType`      | A React component for the integration's icon.                   |
+| `Icon`                 | `React.FC`                 | A React component for the integration's icon.                   |
 | `pageViewEventHandler` | `PageViewEventTrigger`     | Optional. Handler for tracking page views.                      |
-| `WrapperComponent`     | `React.ComponentType`      | Optional. A wrapper component for the integration.              |
+| `WrapperComponent`     | `React.FC`                 | Optional. A wrapper component for the integration.              |
 | `options`              | `IntegrationConfigOptions` | Optional. Additional configuration options for the integration. |
 | `enabledByDefault`     | `boolean`                  | Optional. Indicates if the integration is enabled by default.   |
 
@@ -65,7 +65,7 @@ const consentManagerConfig = {
       siteID: 'YOUR_SITE_ID',
     }),
     yourCustomIntegration({
-      tracking_key: 'VERY#SECURE#KEY'
+      tracking_key: 'VERY#SECURE#KEY',
     }),
   ],
   onChangeDecision: (lastDecisionsState, nextDecisionState) => {

packages/docs/docs/core/consent-manager-form.md

@@ -1,23 +1,26 @@
 ---
 title: <ConsentManagerForm />
 ---
+
 # `<ConsentManagerForm />`
 
 `ConsentManagerForm` is a React component designed to provide a basic, unstyled form enabling users to control their consent choices for different integrations. This component is particularly useful as a reference or starting point for integrating a custom consent form. It facilitates the enabling or disabling of integrations based on user preferences. For a pre-styled version, consider exploring our default interface.
 
 ## Props
-| Prop           | Type                        | Description                                                  |
-|----------------|-----------------------------|--------------------------------------------------------------|
-| `formComponent`| `React.ComponentType<DecisionsFormProps>` | Optional. A custom form component to override the default.   |
-| `...props`     | `unknown`                   | Any additional props are passed down to the form component.  |
+
+| Prop            | Type                           | Description                                                 |
+| --------------- | ------------------------------ | ----------------------------------------------------------- |
+| `formComponent` | `React.FC<DecisionsFormProps>` | Optional. A custom form component to override the default.  |
+| `...props`      | `unknown`                      | Any additional props are passed down to the form component. |
 
 ## Example Usage
+
 ```jsx
 import { ConsentManagerForm } from '@consent-manager/core';
 
 const MyConsentForm = () => {
   // Custom form component (optional)
-  const CustomFormComponent = ...; 
+  const CustomFormComponent = ...;
 
   return (
     <ConsentManagerForm formComponent={CustomFormComponent} />

packages/docs/docs/core/consent-manager.md

@@ -14,7 +14,7 @@ The actual layout is provided by the [Form Component](./consent-manager-form.md)
 | ------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
 | `config`            | [`ConsentManagerConfig`](../configuration.md)                                                               | Configuration object for Consent Manager.                         |
 | `store`             | [`ConsentManagerStore`](https://github.com/hashbite/consent-manager/blob/main/packages/core/src/storage.ts) | Storage mechanism for consent decisions.                          |
-| `fallbackComponent` | `React.ComponentType<FallbackComponentProps>`                                                               | Optional. Custom fallback component for unconsented integrations. |
+| `fallbackComponent` | `React.FC<FallbackComponentProps>`                                                                          | Optional. Custom fallback component for unconsented integrations. |
 | `children`          | `React.ReactNode`                                                                                           | The application's components.                                     |
 
 ## Example Usage