feat: react wrapper components (#47)

.changeset/tidy-plants-end.md

@@ -0,0 +1,5 @@
+---
+"dot-connect": minor
+---
+
+Added React wrapper components.

apps/docs/getting-started.md

@@ -89,16 +89,6 @@ Or
 
 Add a connection button to your application using a web component. You can include it in your HTML or JSX.
 
-#### Using JSX
-
-```tsx
-const App = () => (
-  <div>
-    <dc-connection-button />
-  </div>
-);
-```
-
 #### Using HTML
 
 ```html
@@ -108,22 +98,25 @@ const App = () => (
 </body>
 ```
 
-### Manually trigger the connection dialog
+#### Using React
 
-Use the `dc-connection-dialog` element to manually control the connection dialog.
-
-#### Declarative approach
+```tsx
+import { ConnectionButton } from "dot-connect/react.js";
+
+function App() {
+  return (
+    <div>
+      <ConnectionButton />
+    </div>
+  );
+}
+```
 
-To open or close the dialog, use the `open` attribute:
+### Manually trigger the connection dialog
 
-```html
-<!-- Open -->
-<dc-connection-dialog open></dc-connection-dialog>
-<!-- Close -->
-<dc-connection-dialog></dc-connection-dialog>
-```
+Use the `dc-connection-dialog` element to manually control the connection dialog.
 
-#### Imperative approach
+#### With Vanilla JS
 
 Invoke the `show()` and `close()` methods on the dialog element:
 
@@ -137,6 +130,22 @@ Invoke the `show()` and `close()` methods on the dialog element:
 </script>
 ```
 
+#### With React
+
+```tsx
+import { ConnectionDialog } from "dot-connect/react.js";
+
+function App() {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <ConnectionDialog open={open} onClose={() => setOpen(false)} />
+      <button onClick={() => setOpen(true)}>Open dialog</button>
+    </div>
+  );
+}
+```
+
 ## Account management
 
 Access accounts via the Reactive DOT API. For more details and examples, refer to the documentation [here](https://reactivedot.dev/docs/getting-started/connect-wallets#display-available-accounts).

packages/dot-connect/package.json

@@ -22,6 +22,7 @@
   "type": "module",
   "exports": {
     ".": "./build/index.js",
+    "./react.js": "./build/react/index.js",
     "./font.css": "./src/fonts.css"
   },
   "files": [
@@ -35,6 +36,7 @@
   },
   "dependencies": {
     "@lit-labs/preact-signals": "^1.0.2",
+    "@lit/react": "^1.0.5",
     "lit": "^3.2.0",
     "qrcode": "^1.5.4"
   },
@@ -45,12 +47,19 @@
     "@tsconfig/strictest": "^2.0.5",
     "@types/eslint__js": "^8.42.3",
     "@types/qrcode": "^1.5.5",
+    "@types/react": "^18.3.4",
     "eslint": "^9.9.0",
     "polkadot-api": "^1.1.0",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.3.0"
   },
   "peerDependencies": {
-    "@reactive-dot/core": "*"
+    "@reactive-dot/core": "*",
+    "react": ">= 18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   }
 }

packages/dot-connect/src/elements/dc-connection-dialog.ts

@@ -83,8 +83,10 @@ export class ConnectionDialog extends DotConnectElement {
   override render() {
     return html`<dc-dialog
       ?open=${this.open}
-      @close=${(event: Event) =>
-        this.dispatchEvent(new Event(event.type, event))}
+      @close=${(event: Event) => {
+        this.close();
+        this.dispatchEvent(new Event(event.type, event));
+      }}
     >
       <span slot="title">Connect wallet</span>
       <div slot="content">

packages/dot-connect/src/react/index.ts

@@ -0,0 +1,19 @@
+import { ConnectionButton as ConnectionButtonElement } from "../elements/dc-connection-button.js";
+import { ConnectionDialog as ConnectionDialogElement } from "../elements/dc-connection-dialog.js";
+import { createComponent } from "@lit/react";
+import React from "react";
+
+export const ConnectionButton = createComponent({
+  tagName: "dc-connection-button",
+  elementClass: ConnectionButtonElement,
+  react: React,
+});
+
+export const ConnectionDialog = createComponent({
+  tagName: "dc-connection-dialog",
+  elementClass: ConnectionDialogElement,
+  react: React,
+  events: {
+    onClose: "close",
+  },
+});

yarn.lock

@@ -1403,6 +1403,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lit/react@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@lit/react@npm:1.0.5"
+  peerDependencies:
+    "@types/react": 17 || 18
+  checksum: 10c0/bf6ebf41c900e08d42ff68f2df0eea17c2c3bf365bf8c952e264dce3c0f24799ac422c3c0059a1e039fa4dcb4de0977cfdcf1b06603353ea79aacb0613f4d333
+  languageName: node
+  linkType: hard
+
 "@lit/reactive-element@npm:^1.3.0, @lit/reactive-element@npm:^1.6.0":
   version: 1.6.3
   resolution: "@lit/reactive-element@npm:1.6.3"
@@ -2682,6 +2691,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:*":
+  version: 15.7.12
+  resolution: "@types/prop-types@npm:15.7.12"
+  checksum: 10c0/1babcc7db6a1177779f8fde0ccc78d64d459906e6ef69a4ed4dd6339c920c2e05b074ee5a92120fe4e9d9f1a01c952f843ebd550bee2332fc2ef81d1706878f8
+  languageName: node
+  linkType: hard
+
 "@types/qrcode@npm:^1.5.5":
   version: 1.5.5
   resolution: "@types/qrcode@npm:1.5.5"
@@ -2691,6 +2707,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^18.3.4":
+  version: 18.3.4
+  resolution: "@types/react@npm:18.3.4"
+  dependencies:
+    "@types/prop-types": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/5c52e1e6f540cff21e3c2a5212066d02e005f6fb21e4a536a29097fae878db9f407cd7a4b43778f51359349c5f692e08bc77ddb5f5cecbfca9ca4d4e3c91a48e
+  languageName: node
+  linkType: hard
+
 "@types/semver@npm:^7.5.0":
   version: 7.5.8
   resolution: "@types/semver@npm:7.5.8"
@@ -4109,7 +4135,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.1.3":
+"csstype@npm:^3.0.2, csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
@@ -4278,11 +4304,13 @@ __metadata:
   dependencies:
     "@eslint/js": "npm:^9.9.0"
     "@lit-labs/preact-signals": "npm:^1.0.2"
+    "@lit/react": "npm:^1.0.5"
     "@reactive-dot/core": "npm:^0.9.0"
     "@tsconfig/recommended": "npm:^1.0.7"
     "@tsconfig/strictest": "npm:^2.0.5"
     "@types/eslint__js": "npm:^8.42.3"
     "@types/qrcode": "npm:^1.5.5"
+    "@types/react": "npm:^18.3.4"
     eslint: "npm:^9.9.0"
     lit: "npm:^3.2.0"
     polkadot-api: "npm:^1.1.0"
@@ -4291,6 +4319,10 @@ __metadata:
     typescript-eslint: "npm:^8.3.0"
   peerDependencies:
     "@reactive-dot/core": "*"
+    react: ">= 18"
+  peerDependenciesMeta:
+    react:
+      optional: true
   languageName: unknown
   linkType: soft