Move addon package to toolbox/fdc3-for-web/reference-ui

package.json

@@ -27,6 +27,7 @@
     "packages/fdc3-get-agent",
     "packages/fdc3",
     "toolbox/fdc3-for-web/demo",
+    "toolbox/fdc3-for-web/reference-ui",
     "toolbox/fdc3-workbench"
   ],
   "scripts": {
@@ -37,7 +38,7 @@
     "report": "nyc report --reporter json-summary --report-dir nyc-coverage-report --exclude-after-remap false --temp-dir coverage",
     "lint": "npm run lint --workspaces --if-present",
     "syncpack": "npm exec syncpack fix-mismatches --types 'local'",
-    "dev": "concurrently \"cd toolbox/fdc3-workbench && npm run dev\" \"cd toolbox/fdc3-for-web/demo && npm run dev\""
+    "dev": "concurrently \"cd toolbox/fdc3-workbench && npm run dev\" \"cd toolbox/fdc3-for-web/reference-ui && npm run dev\" \"cd toolbox/fdc3-for-web/demo && npm run dev\""
   },
   "prettier": {
     "semi": true,

packages/addon/package.json → toolbox/fdc3-for-web/reference-ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "addon",
+  "name": "fdc3-for-web-reference-ui",
   "private": true,
   "version": "2.1.1",
   "type": "module",
@@ -14,6 +14,6 @@
     "vite": "^5.2.0"
   },
   "dependencies": {
-    "@kite9/fdc3": "2.1.1"
+    "@kite9/fdc3-common": "2.2.0-beta.6"
   }
 }

packages/addon/src/channel_selector.ts → toolbox/fdc3-for-web/reference-ui/src/channel_selector.ts

@@ -1,6 +1,5 @@
 import { IframeChannelsPayload, Channel } from "@kite9/fdc3-common";
-
-
+import { Fdc3UserInterfaceHello, Fdc3UserInterfaceRestyle } from "@kite9/fdc3-schema/dist/generated/api/BrowserTypes";
 
 const fillChannels = (data: Channel[], selected: string | null, messageClickedChannel: (s: string | null) => void) => {
   const list = document.getElementById('list')!!;
@@ -49,16 +48,16 @@ window.addEventListener("load", () => {
   myPort.onmessage = ({ data }) => {
     console.debug("Received message: ", data);
     switch (data.type) {
-      case "iframeHandshake": {
+      case "Fdc3UserInterfaceHandshake ": {
         collapse();
         break;
       }
-      case "fdc3UserInterfaceChannels": {
+      case "Fdc3UserInterfaceChannels": {
         logo.removeEventListener("click", expand);
         const { userChannels, selected } = data.payload as IframeChannelsPayload;
         fillChannels(userChannels, selected, (channelStr) => {
           myPort.postMessage({
-            type: "fdc3UserInterfaceSelected",
+            type: "Fdc3UserInterfaceSelected",
             payload: {
               selected: channelStr || null
             }
@@ -73,9 +72,10 @@ window.addEventListener("load", () => {
     }
   };
 
-  parent.postMessage({
-    type: "fdc3UserInterfaceHello",
+  const helloMessage: Fdc3UserInterfaceHello = {
+    type: "Fdc3UserInterfaceHello",
     payload: {
+      implementationDetails: "",
       initialCSS: {
         width: `${8 * 4}px`,
         height: `${8 * 5}px`,
@@ -87,29 +87,31 @@ window.addEventListener("load", () => {
 
       }
     }
-  }, "*", [mc.port2]);
+  }
+  parent.postMessage(helloMessage, "*", [mc.port2]);
 
   const expand = () => {
     document.body.setAttribute("data-expanded", "true");
-    myPort.postMessage({
-      type: "fdc3UserInterfaceRestyle",
+    const restyleMessage: Fdc3UserInterfaceRestyle = {
+      type: "Fdc3UserInterfaceRestyle",
       payload: {
         updatedCSS: {
           width: `100%`,
           height: `100%`,
-          top: 0,
-          left: 0,
+          top: "0",
+          left: "0",
           zIndex: "1000",
           "z-index": "1000",
           position: "fixed"
         }
       }
-    });
+    }
+    myPort.postMessage(restyleMessage);
   }
 
   const collapse = () => {
-    myPort.postMessage({
-      type: "fdc3UserInterfaceRestyle",
+    const restyleMessage: Fdc3UserInterfaceRestyle = {
+      type: "Fdc3UserInterfaceRestyle",
       payload: {
         updatedCSS: {
           width: `${8 * 4}px`,
@@ -121,7 +123,8 @@ window.addEventListener("load", () => {
           position: "fixed"
         }
       }
-    });
+    }
+    myPort.postMessage(restyleMessage);
 
     // If you immediately change to the logo, before the iframe has a chance to finish restyling,
     // you see a flicker of a giant, colored logo.