@release0/react 1.0.0

package/README.md

@@ -0,0 +1,144 @@
+## Install
+
+```bash
+npm install @release0/react
+```
+
+## Standard
+
+```tsx
+import { Standard } from "@release0/react";
+
+const App = () => {
+  return (
+    <Standard
+      agent="my-feedback-agent"
+      style={{ width: "100%", height: "500px" }}
+    />
+  );
+};
+```
+
+This code is creating a container with a 100% width (will match parent width) and 500px height.
+
+## Popup
+
+```tsx
+import { Popup } from "@release0/react";
+
+const App = () => {
+  return <Popup agent="my-feedback-agent" autoShowDelay={2000} />;
+};
+```
+
+This code will automatically trigger the popup window after 2 seconds.
+
+### Open or Close a popup
+
+You can use these commands:
+
+```js
+import { open } from "@release0/react";
+
+open();
+```
+
+```js
+import { close } from "@release0/react";
+
+close();
+```
+
+```js
+import { toggle } from "@release0/react";
+
+toggle();
+```
+
+## Bubble
+
+```tsx
+import { Bubble } from "@release0/react";
+
+const App = () => {
+  return (
+    <Bubble
+      agent="my-feedback-agent"
+      previewMessage={{
+        message: "I have a question for you!",
+        autoShowDelay: 5000,
+        avatarUrl: "https://release0.com/images/logo512.png",
+      }}
+      theme={{
+        button: { backgroundColor: "#0042DA", iconColor: "#FFFFFF" },
+        previewMessage: { backgroundColor: "#ffffff", textColor: "black" },
+      }}
+    />
+  );
+};
+```
+
+This code will show the bubble and let a preview message appear after 5 seconds.
+
+### Open or close the preview message
+
+You can use these commands:
+
+```js
+import { showPreviewMessage } from "@release0/react";
+
+Agent.showPreviewMessage();
+```
+
+```js
+import { hidePreviewMessage } from "@release0/react";
+
+Agent.hidePreviewMessage();
+```
+
+### Open or close the chat window
+
+You can use these commands:
+
+```js
+import { open } from "@release0/react";
+
+open();
+```
+
+```js
+import { close } from "@release0/react";
+
+close();
+```
+
+```js
+import { toggle } from "@release0/react";
+
+toggle();
+```
+
+## Additional configuration
+
+You can prefill the agent variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
+
+```tsx
+import { Standard } from "@release0/react";
+
+const App = () => {
+  return (
+    <Standard
+      agent="my-feedback-agent"
+      style={{ width: "100%", height: "600px" }}
+      prefilledVariables={{
+        "Account URL": "https://my-site.com/account",
+        "User name": "My Username",
+      }}
+    />
+  );
+};
+```
+
+It will prefill the `Account URL` variable with "https://my-site.com/account" and the `User name` variable with "My Username".
+
+Note that if your site URL contains query params (i.e. https://my-site.com/account?User%20name=My%20Username), the variables will automatically be injected to the agent. So you don't need to manually transfer query params to the agent embed configuration.

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AgentProps, BubbleProps, PopupProps } from '@release0/js';
+export * from '@release0/js';
+import React from 'react';
+
+type Props$2 = AgentProps & {
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "agent-standard": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                class?: string;
+            };
+        }
+    }
+}
+declare const Standard: ({ style, className, ...assignableProps }: Props$2) => react_jsx_runtime.JSX.Element;
+
+type Props$1 = BubbleProps;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "agent-bubble": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+declare const Bubble: (props: Props$1) => react_jsx_runtime.JSX.Element | null;
+
+type Props = PopupProps;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "agent-popup": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                class?: string;
+            };
+        }
+    }
+}
+declare const Popup: (props: Props) => react_jsx_runtime.JSX.Element;
+
+export { Bubble, Popup, Standard };

package/dist/index.js

@@ -0,0 +1 @@
+import{useEffect as m,useRef as i}from"react";import"@release0/js/web";import{jsx as b}from"react/jsx-runtime";var f=({style:r,className:e,...t})=>{let n=i(null);return m(()=>{if(!n.current||typeof t!="object"||t===null)return;let{children:p,ref:o,key:l,...a}=t;Object.assign(n.current,a)},[t]),b("agent-standard",{ref:n,style:r,class:e})};import{useEffect as c,useRef as d}from"react";import"@release0/js/web";import{jsx as P}from"react/jsx-runtime";var E=r=>{let e=d(null);return c(()=>{if(r.theme?.position==="static"&&!e.current)return;e.current||(e.current=document.createElement("agent-bubble"),document.body.prepend(e.current));let{agent:t,...n}=r;Object.assign(e.current,n,{agent:t})},[r]),c(()=>()=>{r.theme?.position!=="static"&&(e.current?.remove(),e.current=null)},[r.theme?.position]),r.theme?.position==="static"?P("agent-bubble",{ref:e,style:{display:"inline-flex"}}):null};import{useCallback as y,useEffect as u,useRef as s}from"react";import"@release0/js/web";import{jsx as g}from"react/jsx-runtime";var T=r=>{let e=s(null),t=s(null),n=y(o=>{let l=document.createElement("agent-popup");if(t.current=l,p(t.current,o),!e.current){console.warn("Could not attach popup to container because containerRef.current is null");return}e.current?.append(t.current)},[]);u(()=>{t.current||n(r),p(t.current,r)},[n,r]),u(()=>()=>{t.current?.remove(),t.current=null},[]);let p=(o,l)=>{Object.assign(o,l)};return g("div",{ref:e})};export*from"@release0/js";export{E as Bubble,T as Popup,f as Standard};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@release0/react",
+  "version": "1.0.0",
+  "description": "Library to display Release0 agents on your React app",
+  "license": "FSL-1.1-ALv2",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup"
+  },
+  "dependencies": {
+    "react": "18.2.15",
+    "@release0/js": "1.1.4"
+  },
+  "devDependencies": {
+    "@release0/tsconfig": "0.0.1",
+    "@types/react": "18.2.15",
+    "tsup": "8.3.0",
+    "react": "18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@release0/js": "^1.1.4 || workspace:*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}