@grizzlee/react 0.2.0 → 0.3.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@grizzlee/react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://grizzlee.ca",
-  "description": "Embed Grizzlee partner dashboards in React or plain JavaScript apps.",
+  "description": "Embed Grizzlee partner dashboards in React, React Native or plain JavaScript apps.",
   "type": "module",
   "sideEffects": false,
   "engines": {
@@ -19,6 +19,9 @@
     "*": {
       "embed": [
         "./types/embed.d.cts"
+      ],
+      "native": [
+        "./types/native.d.cts"
       ]
     }
   },
@@ -44,6 +47,17 @@
         "default": "./embed.cjs"
       },
       "default": "./embed.js"
+    },
+    "./native": {
+      "import": {
+        "types": "./types/native.d.ts",
+        "default": "./native.js"
+      },
+      "require": {
+        "types": "./types/native.d.cts",
+        "default": "./native.cjs"
+      },
+      "default": "./native.js"
     }
   },
   "files": [
@@ -56,11 +70,19 @@
     "CHANGELOG.md"
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-native": ">=0.78",
+    "react-native-webview": ">=13"
   },
   "peerDependenciesMeta": {
     "react": {
       "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-webview": {
+      "optional": true
     }
   }
 }

package/types/host.d.cts

@@ -1,8 +1,6 @@
-export interface GrizzleeShare {
-    programId: string;
-    url: string;
-    text: string;
-}
+import { type GrizzleeShare } from "./protocol.cjs";
+export { embedUrl } from "./protocol.cjs";
+export type { GrizzleeShare } from "./protocol.cjs";
 export interface GrizzleeEmbedOptions {
     /** An absolute HTTP or HTTPS start URL minted by the merchant's server. */
     url: string;
@@ -17,6 +15,5 @@ export interface GrizzleeEmbedOptions {
     minHeight?: number;
 }
 export declare function minimumHeight(height?: number): number;
-export declare function embedUrl(url: string): URL;
 /** Both hosts use this listener so origin checks and renewal behave the same way. */
 export declare function listenToEmbed(frame: HTMLIFrameElement, options: () => GrizzleeEmbedOptions): () => void;

package/types/host.d.ts

@@ -1,8 +1,6 @@
-export interface GrizzleeShare {
-    programId: string;
-    url: string;
-    text: string;
-}
+import { type GrizzleeShare } from "./protocol.js";
+export { embedUrl } from "./protocol.js";
+export type { GrizzleeShare } from "./protocol.js";
 export interface GrizzleeEmbedOptions {
     /** An absolute HTTP or HTTPS start URL minted by the merchant's server. */
     url: string;
@@ -17,6 +15,5 @@ export interface GrizzleeEmbedOptions {
     minHeight?: number;
 }
 export declare function minimumHeight(height?: number): number;
-export declare function embedUrl(url: string): URL;
 /** Both hosts use this listener so origin checks and renewal behave the same way. */
 export declare function listenToEmbed(frame: HTMLIFrameElement, options: () => GrizzleeEmbedOptions): () => void;

package/types/native.d.cts

@@ -0,0 +1,18 @@
+import { type ReactElement } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type GrizzleeShare } from "./protocol.cjs";
+export type { GrizzleeShare } from "./protocol.cjs";
+export interface GrizzleeNativeEmbedProps {
+    /** A one-use /embed/start URL minted by the merchant's server. */
+    startUrl: string;
+    /** Return a fresh start URL, or update startUrl in your app. */
+    onExpired?: () => string | void | Promise<string | void>;
+    onReady?: () => void;
+    /** Without this callback, the component opens React Native's share sheet. */
+    onShare?: (share: GrizzleeShare) => void | Promise<void>;
+    /** Loading, renewal and sharing errors. */
+    onError?: (error: Error) => void;
+    style?: StyleProp<ViewStyle>;
+}
+/** Render the dashboard directly in a WebView. No merchant wrapper page is needed. */
+export declare function GrizzleeNativeEmbed(props: GrizzleeNativeEmbedProps): ReactElement;

package/types/native.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type GrizzleeShare } from "./protocol.js";
+export type { GrizzleeShare } from "./protocol.js";
+export interface GrizzleeNativeEmbedProps {
+    /** A one-use /embed/start URL minted by the merchant's server. */
+    startUrl: string;
+    /** Return a fresh start URL, or update startUrl in your app. */
+    onExpired?: () => string | void | Promise<string | void>;
+    onReady?: () => void;
+    /** Without this callback, the component opens React Native's share sheet. */
+    onShare?: (share: GrizzleeShare) => void | Promise<void>;
+    /** Loading, renewal and sharing errors. */
+    onError?: (error: Error) => void;
+    style?: StyleProp<ViewStyle>;
+}
+/** Render the dashboard directly in a WebView. No merchant wrapper page is needed. */
+export declare function GrizzleeNativeEmbed(props: GrizzleeNativeEmbedProps): ReactElement;

package/types/protocol.d.cts

@@ -0,0 +1,7 @@
+export interface GrizzleeShare {
+    programId: string;
+    url: string;
+    text: string;
+}
+export declare function embedUrl(url: string, Url?: new (value: string) => URL): URL;
+export declare function parseShare(message: object, validateUrl?: (value: string) => unknown): GrizzleeShare | null;

package/types/protocol.d.ts

@@ -0,0 +1,7 @@
+export interface GrizzleeShare {
+    programId: string;
+    url: string;
+    text: string;
+}
+export declare function embedUrl(url: string, Url?: new (value: string) => URL): URL;
+export declare function parseShare(message: object, validateUrl?: (value: string) => unknown): GrizzleeShare | null;