From 8671e9582d52e6b6825ac3d548f2028dbc5139e4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 24 Sep 2025 08:13:10 +0000
Subject: [PATCH 1/3] Initial plan


From 4527ad3637eb042be9bfc30cc50e6d8566f42d3f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 24 Sep 2025 08:27:11 +0000
Subject: [PATCH 2/3] Add React 19 compatibility shim for Storybook
 unmountComponentAtNode

Co-authored-by: alichherawalla <4958010+alichherawalla@users.noreply.github.com>
---
 .storybook/preview.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index decf3ec3..d6df5df3 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,4 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 import enMessages from '../app/translations/en.json';
+
+// React 19 compatibility shim for unmountComponentAtNode
+if (!ReactDOM.unmountComponentAtNode) {
+  ReactDOM.unmountComponentAtNode = (container) => {
+    if (container._reactRootContainer) {
+      container._reactRootContainer.unmount();
+      delete container._reactRootContainer;
+      return true;
+    }
+    return false;
+  };
+}
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {

From 7ff1bd8a466f9c431bb0d9f4e50e31161f6a4f15 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 24 Sep 2025 08:32:48 +0000
Subject: [PATCH 3/3] Implement comprehensive React 19 compatibility fix for
 Storybook test runner

Co-authored-by: alichherawalla <4958010+alichherawalla@users.noreply.github.com>
---
 .storybook/preview.js | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index d6df5df3..23308064 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,19 +1,50 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import enMessages from '../app/translations/en.json';
 
-// React 19 compatibility shim for unmountComponentAtNode
+// React 19 compatibility: Patch missing ReactDOM methods
 if (!ReactDOM.unmountComponentAtNode) {
-  ReactDOM.unmountComponentAtNode = (container) => {
-    if (container._reactRootContainer) {
+  ReactDOM.unmountComponentAtNode = function(container) {
+    if (container && container._reactInternalInstance) {
+      // For older React versions compatibility
+      container._reactInternalInstance.unmount();
+      delete container._reactInternalInstance;
+      return true;
+    }
+    
+    if (container && container._reactRootContainer) {
       container._reactRootContainer.unmount();
       delete container._reactRootContainer;
       return true;
     }
+    
+    // Fallback: clean the container
+    if (container) {
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
+      return true;
+    }
+    
     return false;
   };
 }
 
+if (!ReactDOM.render) {
+  ReactDOM.render = function(element, container, callback) {
+    let root = container._reactRootContainer;
+    if (!root) {
+      root = container._reactRootContainer = createRoot(container);
+    }
+    
+    root.render(element);
+    
+    if (callback) {
+      setTimeout(callback, 0);
+    }
+  };
+}
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {