test(e2e): update nextjs imports for components w dynamic import due …

…to use of dom api

cypress/apps/angular-app/angular.json

@@ -76,5 +76,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

cypress/apps/next-app/package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@govtechsg/sgds-web-component": "file:../../../lib",
-    "@webcomponents/scoped-custom-element-registry": "^0.0.9",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18"

cypress/apps/next-app/src/app/components/Alert.tsx

@@ -1,5 +1,4 @@
 import SgdsAlert from "@govtechsg/sgds-web-component/react/alert/index.js";
-import SgdsAlertHeading from "@govtechsg/sgds-web-component/react/alert-heading/index.js";
 import SgdsAlertLink from "@govtechsg/sgds-web-component/react/alert-link/index.js";
 
 export const Alert = () => {
@@ -36,7 +35,6 @@ export const Alert = () => {
           </svg>
         </span>
         <div>
-          <SgdsAlertHeading>Hello, nice to meet you</SgdsAlertHeading>
           <p>
             Aww yeah, you successfully read this important
             <SgdsAlertLink href="#">

cypress/apps/next-app/src/app/components/Combobox.tsx

@@ -1,5 +1,10 @@
-import SgdsCombobox from "@govtechsg/sgds-web-component/react/combo-box/index.js";
-
+import dynamic from "next/dynamic"
+const SgdsCombobox = dynamic(
+    () => import("@govtechsg/sgds-web-component/react/combo-box/index.js"),
+    {
+      ssr: false,
+    }
+  );
 export const Combobox = () => {
     return (
       <SgdsCombobox 

cypress/apps/next-app/src/app/components/Datepicker.tsx

@@ -1,5 +1,10 @@
-import SgdsDatepicker from "@govtechsg/sgds-web-component/react/datepicker/index.js";
-
+import dynamic from "next/dynamic"
+const SgdsDatepicker = dynamic(
+    () => import("@govtechsg/sgds-web-component/react/datepicker/index.js"),
+    {
+      ssr: false,
+    }
+  );
 export const Datepicker = () => {
   return <SgdsDatepicker dateFormat="DD/MM/YYYY" mode="single"></SgdsDatepicker>;
 };

cypress/apps/next-app/src/app/components/Dropdown.tsx

@@ -1,6 +1,12 @@
 import SgdsDropdownItem from "@govtechsg/sgds-web-component/react/dropdown-item/index.js";
-import  SgdsDropdown from "@govtechsg/sgds-web-component/react/dropdown/index.js"
-import  SgdsButton from "@govtechsg/sgds-web-component/react/button/index.js"
+import dynamic from "next/dynamic"
+const SgdsDropdown = dynamic(
+    () => import("@govtechsg/sgds-web-component/react/dropdown/index.js"),
+    {
+      ssr: false,
+    }
+  );
+  import SgdsButton from "@govtechsg/sgds-web-component/react/button/index.js"
 
 
 export const Dropdown = () => {

cypress/apps/next-app/src/app/components/Mainnav.tsx

@@ -2,8 +2,14 @@ import SgdsButton from "@govtechsg/sgds-web-component/react/button/index.js";
 import SgdsMainnavItem from "@govtechsg/sgds-web-component/react/mainnav-item/index.js";
 import SgdsDropdownItem from "@govtechsg/sgds-web-component/react/dropdown-item/index.js";
 import SgdsMainnav from "@govtechsg/sgds-web-component/react/mainnav/index.js";
-import SgdsMainnavDropdown from "@govtechsg/sgds-web-component/react/mainnav-dropdown/index.js";
+import dynamic from "next/dynamic"
 
+const SgdsMainnavDropdown = dynamic(
+  () => import("@govtechsg/sgds-web-component/react/mainnav-dropdown/index.js"),
+  {
+    ssr: false,
+  }
+);  
 
 export const Mainnav = () => {
   return (

cypress/apps/next-app/src/app/components/Progress.tsx

@@ -1,9 +1,7 @@
-import SgdsProgress from "@govtechsg/sgds-web-component/react/progress/index.js";
 import SgdsProgressBar from "@govtechsg/sgds-web-component/react/progress-bar/index.js";
 
 export const Progress = () => {
   return (
-    <SgdsProgress>
       <SgdsProgressBar
         label="50%"
         variant="secondary"
@@ -12,6 +10,5 @@ export const Progress = () => {
         ariamax={100}
         aria-label="Loading in progress"
       ></SgdsProgressBar>
-    </SgdsProgress>
   );
 };

cypress/apps/next-app/src/app/components/Tooltip.tsx

@@ -1,5 +1,10 @@
-import SgdsTooltip from "@govtechsg/sgds-web-component/react/tooltip/index.js"
-
+import dynamic from "next/dynamic"
+const SgdsTooltip = dynamic(
+  () => import("@govtechsg/sgds-web-component/react/tooltip/index.js"),
+  {
+    ssr: false,
+  }
+) 
 export const Tooltip = () => {
   return (
     <>

cypress/apps/react-app/package.json

@@ -37,7 +37,6 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@webcomponents/scoped-custom-element-registry": "^0.0.9"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

cypress/apps/react-app/src/index.js

@@ -1,4 +1,3 @@
-import "@webcomponents/scoped-custom-element-registry";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";

package.json

@@ -46,7 +46,7 @@
   "license": "MIT",
   "dependencies": {
     "@govtechsg/sgds": "^2.3.2",
-    "@lit-labs/react": "^1.0.9",
+    "@lit/react": "^1.0.6",
     "@open-wc/scoped-elements": "2.2.0",
     "@storybook/addon-a11y": "^8.2.8",
     "bootstrap": "^5.1.3",

scripts/makeReact.mjs

@@ -33,7 +33,7 @@ components.map(component => {
   const source = prettier.format(
     `
       import * as React from 'react';
-      import { createComponent } from '@lit-labs/react';
+      import { createComponent } from '@lit/react';
       import Component from '../../components/${importPath}';
       import { register } from "../../utils/ce-registry";