@bunnyapp/components 1.0.0

package/README.md

@@ -0,0 +1,99 @@
+# ℹ️ About
+
+This repository provides components from the Bunny portal to integrate Bunny UI functionality into your application.
+
+# 🧩 Components
+
+- Invoice
+- Quote
+- PaymentMethod
+- Transactions
+- Subscriptions (view-only mode)
+
+# 📦 Install
+
+```bash
+npm install @bunnyapp/components
+```
+
+Ensure all peer dependencies in the package.json are installed.
+
+# ⚙️ Configuration
+
+1. Whitelist your subdomain in Bunny (e.g., `localhost` for development, `https://[company-name].bunny.com` for production).
+2. Generate a portal session token using the `portalSessionCreate` mutation from the [Bunny API docs](https://docs.bunny.com/developer/api-reference/mutations/portalsessioncreate).
+
+# 🔨 Usage
+
+In order to use any of the components, you must wrap them in the BunnyProvider component.
+The BunnyProvider component provides all the state management and context for the components
+and keeps state up to date between all the components.
+
+We recommend placing the BunnyProvider component at the root of your application so that all Bunny components will be children of the BunnyProvider component.
+
+The below example shows how to use the BunnyProvider component with the Invoice and PaymentMethod components.
+Here the data such as the saved payment method will be updated between the components.
+
+```tsx
+import {
+  BunnyProvider,
+  Invoice,
+  PaymentMethod,
+  Transactions,
+  Subscriptions,
+} from "@bunnyapp/components";
+
+function App() {
+  return (
+    <BunnyProvider
+      token={portalSessionToken}
+      subdomain={subdomain}
+      window={window}
+      accountId={accountId}
+    >
+      <Invoice id="12345" />
+      <PaymentMethod />
+      <Transactions />
+      <Subscriptions />
+    </BunnyProvider>
+  );
+}
+```
+
+In this example, each component has their own BunnyProvider. This is not recommended as it will create a mismatch in the state
+between each of the components. ie if a payment method is saved in the Invoice component, it will not automatically be available in the PaymentMethod component.
+
+```tsx
+import { BunnyProvider, Invoice, PaymentMethod } from "@bunnyapp/components";
+
+function App() {
+  return (
+    <div>
+      <BunnyProvider
+        token={token}
+        subdomain={subdomain}
+        window={window}
+        accountId={accountId}
+      >
+        <Invoice id="12345" />
+      </BunnyProvider>
+      {/* Other components */}
+      <BunnyProvider
+        token={token}
+        subdomain={subdomain}
+        window={window}
+        accountId={accountId}
+      >
+        <PaymentMethod />
+      </BunnyProvider>
+    </div>
+  );
+}
+```
+
+## Parameters
+
+- `token`: Token that allows access to the Bunny API. Generate this using `portalSessionCreate` from [docs](https://docs.bunny.com/developer/api-reference/mutations/portalsessioncreate)
+- `subdomain`: The subdomain the components will make requests to. e.g. `https://acme.bunny.com`
+- `window`: The window to use for the BunnyProvider. We use the window for handling payment objects.
+- `accountId`: The accountId to use for the BunnyProvider. To be deprecated.