@rainbow-robotics/plugin-ui 0.1.0

package/src/react.tsx

@@ -0,0 +1,131 @@
+/**
+ * Author bindings — the React components a plugin author imports from
+ * `@rainbow-robotics/plugin-ui/react`.
+ *
+ * These are *name tags*: they render rb-* custom elements into the sandbox's
+ * remote DOM. The real rb-components are rendered by the host (see ./host).
+ * Event names from each element's `remoteEvents` surface as `onX` props
+ * (e.g. `change` → `onChange`) carrying a `RemoteEvent` whose `detail` holds
+ * the payload.
+ */
+import { createRemoteComponent } from "@remote-dom/react";
+import type { ComponentType, ReactNode, Ref } from "react";
+import {
+  RbSliderElement,
+  RbButtonElement,
+  RbIconButtonElement,
+  RbTextElement,
+  RbTextInputElement,
+  RbSwitchElement,
+  RbSelectElement,
+  type RbButtonProps,
+  type RbIconButtonProps,
+  type RbSelectProps,
+  type RbSliderProps,
+  type RbSwitchProps,
+  type RbTextInputProps,
+  type RbTextProps,
+} from "./elements";
+
+// NOTE: createRemoteComponent only treats a prop as an event listener when it is
+// declared in `eventProps`; it does NOT auto-derive from the element's
+// `remoteEvents`. These maps MUST mirror the host's eventProps (see ./host).
+//
+// `eventProps` is typed against the element's *typed* EventListeners generic.
+// Fully typing those generics would also force typing every `remoteProperties`
+// shape on the classes (remote-dom itself uses @ts-expect-error around this), so
+// we cast the event maps here. The values are verified by the demo e2e, and the
+// returned components keep their element-derived prop types for plugin authors.
+type EventMap = Record<string, { event: string }>;
+const events = (map: EventMap) => ({ eventProps: map }) as never;
+
+type NoEventProps = Record<never, never>;
+
+type RemoteElementComponentProps<
+  Element,
+  Props,
+  EventProps = NoEventProps,
+> = Props &
+  EventProps & {
+    children?: ReactNode;
+    ref?: Ref<Element>;
+    slot?: string;
+  };
+
+type RemoteElementComponent<
+  Element,
+  Props,
+  EventProps = NoEventProps,
+> = ComponentType<RemoteElementComponentProps<Element, Props, EventProps>>;
+
+export type RbSliderChangeEvent = { detail: number };
+export type RbTextInputEvent = { detail: string };
+export type RbSwitchChangeEvent = { detail: boolean };
+export type RbSelectChangeEvent = { detail: string };
+
+export interface RbSliderEventProps {
+  onChange?: (event: RbSliderChangeEvent) => void;
+}
+
+export interface RbPressEventProps {
+  onPress?: () => void;
+}
+
+export interface RbTextInputEventProps {
+  onInput?: (event: RbTextInputEvent) => void;
+}
+
+export interface RbSwitchEventProps {
+  onChange?: (event: RbSwitchChangeEvent) => void;
+}
+
+export interface RbSelectEventProps {
+  onChange?: (event: RbSelectChangeEvent) => void;
+}
+
+export const Slider = createRemoteComponent(
+  "rb-slider",
+  RbSliderElement,
+  events({ onChange: { event: "change" } }),
+) as RemoteElementComponent<RbSliderElement, RbSliderProps, RbSliderEventProps>;
+export const Button = createRemoteComponent(
+  "rb-button",
+  RbButtonElement,
+  events({ onPress: { event: "press" } }),
+) as RemoteElementComponent<RbButtonElement, RbButtonProps, RbPressEventProps>;
+export const IconButton = createRemoteComponent(
+  "rb-icon-button",
+  RbIconButtonElement,
+  events({ onPress: { event: "press" } }),
+) as RemoteElementComponent<
+  RbIconButtonElement,
+  RbIconButtonProps,
+  RbPressEventProps
+>;
+export const Text = createRemoteComponent(
+  "rb-text",
+  RbTextElement,
+) as RemoteElementComponent<RbTextElement, RbTextProps>;
+export const TextInput = createRemoteComponent(
+  "rb-text-input",
+  RbTextInputElement,
+  events({ onInput: { event: "input" } }),
+) as RemoteElementComponent<
+  RbTextInputElement,
+  RbTextInputProps,
+  RbTextInputEventProps
+>;
+export const Switch = createRemoteComponent(
+  "rb-switch",
+  RbSwitchElement,
+  events({ onChange: { event: "change" } }),
+) as RemoteElementComponent<RbSwitchElement, RbSwitchProps, RbSwitchEventProps>;
+export const Select = createRemoteComponent(
+  "rb-select",
+  RbSelectElement,
+  events({ onChange: { event: "change" } }),
+) as RemoteElementComponent<RbSelectElement, RbSelectProps, RbSelectEventProps>;
+
+export { useRb } from "./sdk";
+export type { RbSdk, RbNotifyType } from "./sdk";
+export type { RbSelectOption } from "./elements";

package/src/sdk.ts

@@ -0,0 +1,41 @@
+/**
+ * Plugin runtime SDK — the small, stable surface a plugin author calls from
+ * inside the sandbox to talk to the host (Muscat / nexus).
+ *
+ * The concrete implementation is injected by the host across the iframe thread
+ * (see ./connect for the sandbox side, ./host for the host side).
+ */
+import { createContext, useContext } from "react";
+
+export type RbNotifyType = "info" | "success" | "warning" | "error";
+
+export interface RbSdk {
+  /**
+   * Invoke a host-side action (declared in manifest.actions). Resolves with
+   * whatever the host/back end returns.
+   */
+  action: (id: string, payload?: unknown) => Promise<unknown>;
+  /** Show a transient notification through the host's toast system. */
+  notify: (message: string, type?: RbNotifyType) => void;
+}
+
+const noopSdk: RbSdk = {
+  action: async () => {
+    if (typeof console !== "undefined") {
+      console.warn("[plugin-ui] rb.action called outside of a host context");
+    }
+    return undefined;
+  },
+  notify: (message) => {
+    if (typeof console !== "undefined") {
+      console.warn("[plugin-ui] rb.notify (no host):", message);
+    }
+  },
+};
+
+export const RbContext = createContext<RbSdk>(noopSdk);
+
+/** Access the host SDK from within a plugin component. */
+export function useRb(): RbSdk {
+  return useContext(RbContext);
+}