add web component button and update dependencies

DaleStudy · Dec 27, 2024 · 3bafd31 · 3bafd31
1 parent 8d37e8a
commit 3bafd31
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <wc-button children="Click Me"></wc-button>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
+    "@r2wc/react-to-web-component": "^2.0.4",
     "axe-playwright": "^2.0.3",
     "chromatic": "^11.20.2",
     "react": "^18.3.1",

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,3 +1,4 @@
+import r2wc from "@r2wc/react-to-web-component";
 import { css } from "../../../styled-system/css";
 
 export interface ButtonProps {
@@ -46,10 +47,21 @@ export const Button = ({
         "&:disabled": { opacity: 0.5 },
       })}
       type={type}
-      onClick={onClick}
+      onClick={() => {
+        console.log("Button clicked!");
+        onClick?.();
+      }}
       {...rest}
     >
       {children}
     </button>
   );
 };
+
+const WcButton = r2wc(Button, {
+  props: {
+    children: "string",
+  },
+});
+
+customElements.define("wc-button", WcButton);