@drippr/embed-react 0.1.0

package/README.md

@@ -0,0 +1,228 @@
+# @drippr/embed-react
+
+React component for embedding Drippr feedback flows into your application. Supports inline, modal, and drawer display modes.
+
+## Installation
+
+```bash
+npm install @drippr/embed-react
+```
+
+## Quick Start
+
+```tsx
+import { DripprFlow } from "@drippr/embed-react";
+
+function App() {
+  return (
+    <DripprFlow
+      flowId="your-flow-public-key"
+      mode="inline"
+      onSubmitted={() => console.log("Feedback submitted!")}
+    />
+  );
+}
+```
+
+## Usage Examples
+
+### Inline Mode
+
+Embed the flow directly in your page:
+
+```tsx
+import { DripprFlow } from "@drippr/embed-react";
+
+function FeedbackSection() {
+  return (
+    <div>
+      <h2>Share Your Feedback</h2>
+      <DripprFlow
+        flowId="your-flow-public-key"
+        mode="inline"
+        onSubmitted={() => alert("Thank you for your feedback!")}
+      />
+    </div>
+  );
+}
+```
+
+### Modal Mode
+
+Open the flow in a modal dialog:
+
+```tsx
+import { DripprFlow } from "@drippr/embed-react";
+
+function FeedbackButton() {
+  return (
+    <DripprFlow
+      flowId="your-flow-public-key"
+      mode="modal"
+      triggerLabel="Give Feedback"
+      onSubmitted={() => console.log("Done!")}
+    />
+  );
+}
+```
+
+**Custom Trigger:**
+
+```tsx
+<DripprFlow flowId="your-flow-public-key" mode="modal">
+  {({ open }) => (
+    <button onClick={open} className="custom-button">
+      Open Feedback Modal
+    </button>
+  )}
+</DripprFlow>
+```
+
+### Drawer Mode
+
+Open the flow in a side drawer:
+
+```tsx
+import { DripprFlow } from "@drippr/embed-react";
+
+function FeedbackDrawer() {
+  return (
+    <DripprFlow
+      flowId="your-flow-public-key"
+      mode="drawer"
+      triggerLabel="Feedback"
+      onSubmitted={() => console.log("Done!")}
+    />
+  );
+}
+```
+
+**Controlled Drawer:**
+
+```tsx
+import { useState } from "react";
+import { DripprFlow } from "@drippr/embed-react";
+
+function ControlledDrawer() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open Drawer</button>
+      <DripprFlow
+        flowId="your-flow-public-key"
+        mode="drawer"
+        open={open}
+        onOpenChange={setOpen}
+      />
+    </>
+  );
+}
+```
+
+## Props
+
+### DripprFlowProps
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `flowId` | `string` | Yes | - | The flow's public key from your Drippr dashboard |
+| `mode` | `"inline" \| "modal" \| "drawer"` | No | `"inline"` | How to display the flow |
+| `open` | `boolean` | No | - | Controlled open state (for modal/drawer) |
+| `onOpenChange` | `(open: boolean) => void` | No | - | Callback when open state changes |
+| `prefill` | `PrefillData` | No | - | Pre-fill contact form fields |
+| `children` | `(api: DripprFlowApi) => ReactNode` | No | - | Render prop for custom trigger (modal/drawer only) |
+| `triggerLabel` | `string` | No | `"Give Feedback"` | Default trigger label when no children provided |
+| `onSubmitted` | `() => void` | No | - | Called when the user completes the flow |
+| `className` | `string` | No | - | Additional CSS class for the container |
+| `style` | `React.CSSProperties` | No | - | Inline styles for the container |
+| `height` | `number` | No | `700` | Fallback height for the iframe (px) |
+| `baseUrl` | `string` | No | `"https://app.drippr.io"` | Base URL for the embed |
+
+### PrefillData
+
+```tsx
+interface PrefillData {
+  email?: string;
+  company?: string;
+  name?: string;
+}
+```
+
+**Example:**
+
+```tsx
+<DripprFlow
+  flowId="your-flow-public-key"
+  mode="inline"
+  prefill={{
+    email: "user@example.com",
+    name: "John Doe",
+    company: "Acme Inc"
+  }}
+/>
+```
+
+### DripprFlowApi
+
+The API object provided to render prop children:
+
+```tsx
+interface DripprFlowApi {
+  open: () => void;
+  close: () => void;
+}
+```
+
+## Features
+
+- **Three Display Modes**: Inline, modal, and drawer
+- **Controlled & Uncontrolled**: Support for both controlled and uncontrolled state
+- **Custom Triggers**: Use render props to create custom trigger buttons
+- **Prefill Support**: Pre-populate form fields with user data
+- **Auto-resize**: Iframe automatically resizes based on content
+- **TypeScript**: Full TypeScript support with exported types
+- **React 18+**: Built for React 18 and above
+
+## Requirements
+
+- React >= 18.0.0
+- React DOM >= 18.0.0
+
+## TypeScript
+
+All types are exported for use in your TypeScript projects:
+
+```tsx
+import type {
+  DripprFlowProps,
+  DripprFlowApi,
+  PrefillData,
+  EmbedMode,
+} from "@drippr/embed-react";
+```
+
+## Development
+
+For local development:
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Watch mode for development
+npm run dev
+
+# Type check
+npm run typecheck
+
+# Lint
+npm run lint
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PrefillData {
+    email?: string;
+    company?: string;
+    name?: string;
+}
+type DripprMessageFromChild = {
+    type: "drippr:ready";
+    flowId: string;
+    instanceId: string;
+} | {
+    type: "drippr:resize";
+    flowId: string;
+    instanceId: string;
+    height: number;
+} | {
+    type: "drippr:submitted";
+    flowId: string;
+    instanceId: string;
+    dropId?: string;
+};
+type DripprMessageToChild = {
+    type: "drippr:prefill";
+    instanceId: string;
+    payload: PrefillData;
+};
+type DripprMessage = DripprMessageFromChild | DripprMessageToChild;
+type EmbedMode = "inline" | "modal" | "drawer";
+interface DripprFlowApi {
+    open: () => void;
+    close: () => void;
+}
+interface DripprFlowProps {
+    /** The flow's public ID (from your Drippr dashboard) */
+    flowId: string;
+    /** How to display the flow: inline, modal, or drawer */
+    mode?: EmbedMode;
+    /** Controlled open state (for modal/drawer) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Pre-fill contact form fields */
+    prefill?: PrefillData;
+    /** Render prop for custom trigger (modal/drawer only) */
+    children?: (api: DripprFlowApi) => React.ReactNode;
+    /** Default trigger label when no children provided (modal/drawer only) */
+    triggerLabel?: string;
+    /** Called when the user completes the flow */
+    onSubmitted?: () => void;
+    /** Additional CSS class for the container */
+    className?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+    /** Fallback height for the iframe (default: 700) */
+    height?: number;
+    /** Base URL for the embed (defaults to production) */
+    baseUrl?: string;
+}
+
+declare function DripprFlow({ flowId, mode, open: controlledOpen, onOpenChange, prefill, children, triggerLabel, onSubmitted, className, style, height: fallbackHeight, baseUrl, }: DripprFlowProps): react_jsx_runtime.JSX.Element | null;
+
+export { DripprFlow, type DripprFlowApi, type DripprFlowProps, type DripprMessage, type DripprMessageFromChild, type DripprMessageToChild, type EmbedMode, type PrefillData };

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PrefillData {
+    email?: string;
+    company?: string;
+    name?: string;
+}
+type DripprMessageFromChild = {
+    type: "drippr:ready";
+    flowId: string;
+    instanceId: string;
+} | {
+    type: "drippr:resize";
+    flowId: string;
+    instanceId: string;
+    height: number;
+} | {
+    type: "drippr:submitted";
+    flowId: string;
+    instanceId: string;
+    dropId?: string;
+};
+type DripprMessageToChild = {
+    type: "drippr:prefill";
+    instanceId: string;
+    payload: PrefillData;
+};
+type DripprMessage = DripprMessageFromChild | DripprMessageToChild;
+type EmbedMode = "inline" | "modal" | "drawer";
+interface DripprFlowApi {
+    open: () => void;
+    close: () => void;
+}
+interface DripprFlowProps {
+    /** The flow's public ID (from your Drippr dashboard) */
+    flowId: string;
+    /** How to display the flow: inline, modal, or drawer */
+    mode?: EmbedMode;
+    /** Controlled open state (for modal/drawer) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Pre-fill contact form fields */
+    prefill?: PrefillData;
+    /** Render prop for custom trigger (modal/drawer only) */
+    children?: (api: DripprFlowApi) => React.ReactNode;
+    /** Default trigger label when no children provided (modal/drawer only) */
+    triggerLabel?: string;
+    /** Called when the user completes the flow */
+    onSubmitted?: () => void;
+    /** Additional CSS class for the container */
+    className?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+    /** Fallback height for the iframe (default: 700) */
+    height?: number;
+    /** Base URL for the embed (defaults to production) */
+    baseUrl?: string;
+}
+
+declare function DripprFlow({ flowId, mode, open: controlledOpen, onOpenChange, prefill, children, triggerLabel, onSubmitted, className, style, height: fallbackHeight, baseUrl, }: DripprFlowProps): react_jsx_runtime.JSX.Element | null;
+
+export { DripprFlow, type DripprFlowApi, type DripprFlowProps, type DripprMessage, type DripprMessageFromChild, type DripprMessageToChild, type EmbedMode, type PrefillData };