From 258d57e6afe0c3cf42b130cff5108a4759fb8212 Mon Sep 17 00:00:00 2001
From: Oluwatimi <oluwatimi.owoturo@shopify.com>
Date: Fri, 22 Nov 2024 16:34:16 -0500
Subject: [PATCH 1/2] testing remote dom

---
 examples/kitchen-sink/app/host.tsx            | 10 +++++++-
 examples/kitchen-sink/app/host/components.tsx | 23 +++++++++++++++++++
 examples/kitchen-sink/app/remote/elements.ts  | 13 +++++++++++
 .../app/remote/examples/react.tsx             | 10 ++++++++
 4 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/examples/kitchen-sink/app/host.tsx b/examples/kitchen-sink/app/host.tsx
index 5664b6d7..f854e647 100644
--- a/examples/kitchen-sink/app/host.tsx
+++ b/examples/kitchen-sink/app/host.tsx
@@ -7,7 +7,14 @@ import {
 import {ThreadIframe, ThreadWebWorker} from '@quilted/threads';
 
 import type {SandboxAPI} from './types.ts';
-import {Button, Modal, Stack, Text, ControlPanel} from './host/components.tsx';
+import {
+  Button,
+  Modal,
+  Stack,
+  Text,
+  ControlPanel,
+  Banner,
+} from './host/components.tsx';
 import {createState} from './host/state.ts';
 
 // We will put any remote elements we want to render in this root element.
@@ -42,6 +49,7 @@ const components = new Map([
   ['ui-button', createRemoteComponentRenderer(Button)],
   ['ui-stack', createRemoteComponentRenderer(Stack)],
   ['ui-modal', createRemoteComponentRenderer(Modal)],
+  ['ui-banner', createRemoteComponentRenderer(Banner)],
   // The `remote-fragment` element is a special element created by Remote DOM when
   // it needs an unstyled container for a list of elements. This is primarily used
   // to convert elements passed as a prop to React or Preact components into a slotted
diff --git a/examples/kitchen-sink/app/host/components.tsx b/examples/kitchen-sink/app/host/components.tsx
index b22f62f2..110b103e 100644
--- a/examples/kitchen-sink/app/host/components.tsx
+++ b/examples/kitchen-sink/app/host/components.tsx
@@ -50,6 +50,29 @@ export function Button({
   );
 }
 
+export function Banner({
+  content,
+  primaryAction,
+}: {
+  content: ComponentChildren;
+  primaryAction: ComponentChildren;
+}) {
+  return (
+    <div
+      style={{
+        background: 'white',
+        color: 'black',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+      }}
+    >
+      {content}
+      {primaryAction}
+    </div>
+  );
+}
+
 export function Stack({
   spacing,
   children,
diff --git a/examples/kitchen-sink/app/remote/elements.ts b/examples/kitchen-sink/app/remote/elements.ts
index 940dd067..26a32314 100644
--- a/examples/kitchen-sink/app/remote/elements.ts
+++ b/examples/kitchen-sink/app/remote/elements.ts
@@ -46,6 +46,17 @@ export const Modal = createRemoteElement<
   methods: ['open', 'close'],
 });
 
+export const Banner = createRemoteElement<
+  {},
+  {},
+  {content: true; primaryAction: true}
+>({
+  properties: {
+    content: {type: String},
+  },
+  slots: ['content', 'primaryAction'],
+});
+
 export const Stack = createRemoteElement<StackProperties>({
   properties: {
     spacing: {type: Boolean},
@@ -56,6 +67,7 @@ customElements.define('ui-text', Text);
 customElements.define('ui-button', Button);
 customElements.define('ui-modal', Modal);
 customElements.define('ui-stack', Stack);
+customElements.define('ui-banner', Banner);
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -63,6 +75,7 @@ declare global {
     'ui-button': InstanceType<typeof Button>;
     'ui-stack': InstanceType<typeof Stack>;
     'ui-modal': InstanceType<typeof Modal>;
+    'ui-banner': InstanceType<typeof Banner>;
   }
 }
 
diff --git a/examples/kitchen-sink/app/remote/examples/react.tsx b/examples/kitchen-sink/app/remote/examples/react.tsx
index 331ed164..d4dc5027 100644
--- a/examples/kitchen-sink/app/remote/examples/react.tsx
+++ b/examples/kitchen-sink/app/remote/examples/react.tsx
@@ -11,6 +11,7 @@ import {
   Button as ButtonElement,
   Stack as StackElement,
   Modal as ModalElement,
+  Banner as BannerElement,
 } from '../elements.ts';
 
 const Text = createRemoteComponent('ui-text', TextElement);
@@ -26,6 +27,7 @@ const Modal = createRemoteComponent('ui-modal', ModalElement, {
     onClose: {event: 'close'},
   },
 });
+const Banner = createRemoteComponent('ui-banner', BannerElement);
 
 export function renderUsingReact(root: Element, api: RenderAPI) {
   createRoot(root).render(<App api={api} />);
@@ -34,6 +36,14 @@ export function renderUsingReact(root: Element, api: RenderAPI) {
 function App({api}: {api: RenderAPI}) {
   return (
     <Stack spacing>
+      <Banner
+        content="Hi there, I am just playing with a cool banner"
+        primaryAction={
+          <Button onPress={() => api.alert('Hey! you clicked me! ')}>
+            Click me!
+          </Button>
+        }
+      />
       <Text>
         Rendering example: <Text emphasis>{api.example}</Text>
       </Text>

From d655f01d994e236d2d48d615f8a6143be10868b8 Mon Sep 17 00:00:00 2001
From: Oluwatimi <oluwatimi.owoturo@shopify.com>
Date: Fri, 22 Nov 2024 16:35:34 -0500
Subject: [PATCH 2/2] remove properties

---
 examples/kitchen-sink/app/remote/elements.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/examples/kitchen-sink/app/remote/elements.ts b/examples/kitchen-sink/app/remote/elements.ts
index 26a32314..1f42f254 100644
--- a/examples/kitchen-sink/app/remote/elements.ts
+++ b/examples/kitchen-sink/app/remote/elements.ts
@@ -51,9 +51,6 @@ export const Banner = createRemoteElement<
   {},
   {content: true; primaryAction: true}
 >({
-  properties: {
-    content: {type: String},
-  },
   slots: ['content', 'primaryAction'],
 });