Use @mml-io/mml-react-types (#55)

mml-io · Aug 8, 2024 · 5044260 · 5044260
1 parent dc22c42
commit 5044260
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -13,5 +13,8 @@
     "react-dom": "18.3.1",
     "@types/react": "18.3.2",
     "@types/react-dom": "18.3.0"
+  },
+  "devDependencies": {
+    "@mml-io/mml-react-types": "0.17.1"
   }
 }
diff --git a/packages/playground/src/Slot.tsx b/packages/playground/src/Slot.tsx
@@ -1,3 +1,4 @@
+import { MMLClickEvent } from "@mml-io/mml-react-types";
 import * as React from "react";
 import { useEffect, useState } from "react";
 
@@ -85,13 +86,12 @@ export function Slot(props: { x: number; z: number; demo?: { url: string; title:
     >
       {loadedState ? (
         <>
-          <m-frame className="document-frame" y="0.2" src={loadedState.url}></m-frame>
+          <m-frame y="0.2" src={loadedState.url}></m-frame>
           <m-group
-            className="remove-document"
             visible-to={loadedState.removable ? loadedState.userId : ""}
             x={(SLOT_WIDTH - SLOT_BORDER_THICKNESS) / 2}
             z={(SLOT_DEPTH - SLOT_BORDER_THICKNESS) / 2}
-            onClick={(event: CustomEvent<{ connectionId: number }>) => {
+            onClick={(event: MMLClickEvent) => {
               const { connectionId } = event.detail;
               if (loadedState && loadedState.removable && loadedState.userId === connectionId) {
                 setLoadedState(null);

diff --git a/packages/playground/tsconfig.json b/packages/playground/tsconfig.json
@@ -5,6 +5,7 @@
     "target": "ES2020",
     "jsx": "react-jsx",
     "lib": ["esnext", "dom", "dom.iterable"],
+    "types": ["react", "react-dom", "node", "@mml-io/mml-react-types"],
     "noImplicitAny": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,