@base316/react 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,53 @@
+# @base316/react
+
+## 0.3.0 — 2026-10-03
+
+Requires `@base316/sdk` 0.3.0.
+
+### Added
+
+- **White-label for a tenant**: `Base316Provider` takes `tenant` —
+  `{ organizationId }` or `{ organizationExternalId }` — and every component
+  under it shows that tenant's branding (its own, then its parent's, then the
+  environment's). Changing it restyles without a reload; an inline object does
+  not refetch.
+- `TeamMembers` says when a team is reached through the organization that
+  manages it rather than by membership.
+- `SubscriptionManager` and `PricingTable` know when an account's plan is
+  provided by the organization that manages it: the plan is shown with the
+  provider named, and nothing can be bought, changed or cancelled.
+  `usePlans()` returns `managedBy`.
+
+## 0.2.0
+
+The first release since `0.1.0` on 13 September. The package shipped **8
+components** then and ships **28** now, all additive.
+
+### Added
+
+Identity and account surfaces:
+
+- `AcceptInvitation`, `ActiveSessions`, `ApiKeyManager`, `DeviceApproval`,
+  `ForgotPassword`, `ResetPassword`, `PrivacyControls`.
+
+Data surfaces, for the customer's own collections:
+
+- `DataTable`, `RecordDetail`, `RecordForm`, `RelationPicker`, `Kanban`,
+  `Chart`.
+
+Billing surfaces:
+
+- `PayInvoice`, and additions to `Invoices`, `PricingTable` and
+  `SubscriptionManager`.
+
+### Fixed
+
+- Test type declarations are no longer published. `tsconfig.build.json`
+  excluded `**/*.test.ts` while every test here is `.test.tsx`, so 24
+  `.test.d.ts` files shipped inside `0.1.0`. The tarball drops from 104 files
+  to 80.
+
+### Note
+
+This package depends on `@base316/sdk` by exact version — `0.2.0` — so that
+package has to be on npm first or an install of this one cannot resolve.

package/README.md

@@ -14,11 +14,11 @@ npm install @base316/react @base316/sdk
 import { Base316Provider } from "@base316/react";
 
 export default function App({ children }) {
-  return (
-    <Base316Provider publishableKey={process.env.NEXT_PUBLIC_BASE316_KEY}>
-      {children}
-    </Base316Provider>
-  );
+	return (
+		<Base316Provider publishableKey={process.env.NEXT_PUBLIC_BASE316_KEY}>
+			{children}
+		</Base316Provider>
+	);
 }
 ```
 
@@ -32,7 +32,7 @@ these components look like here. No colours to keep in step in two places.
 import { SignIn } from "@base316/react";
 
 export default function LoginPage() {
-  return <SignIn onSignedIn={() => router.push("/app")} />;
+	return <SignIn onSignedIn={() => router.push("/app")} />;
 }
 ```
 
@@ -47,11 +47,11 @@ point your users at the link in the dashboard and they come back signed in.
 
 ```tsx
 import {
-  UserProfile,          // email, password, sessions, two-factor
-  PricingTable,         // your plans, with a checkout button
-  SubscriptionManager,  // what they are on, and how to change it
-  Invoices,             // what they have been billed
-  Branding,             // your logo and name, as configured
+	UserProfile, // email, password, sessions, two-factor
+	PricingTable, // your plans, with a checkout button
+	SubscriptionManager, // what they are on, and how to change it
+	Invoices, // what they have been billed
+	Branding, // your logo and name, as configured
 } from "@base316/react";
 ```
 
@@ -59,7 +59,7 @@ import {
 
 Three ways, from least to most invasive. Use the first that works.
 
-**1. The dashboard.** Whatever you set under *Sign-in pages* — brand colour,
+**1. The dashboard.** Whatever you set under _Sign-in pages_ — brand colour,
 background, logo — arrives here automatically.
 
 **2. `appearance` tokens.** No CSS to write:
@@ -79,16 +79,30 @@ inherits your application's styles automatically — silently absorbing whatever
 `body { font }` and `button { }` rules happen to exist produces components that
 look broken in ways neither side can predict.
 
+## White-label for a tenant
+
+When one business runs your product for others — a firm and its clients — show
+the firm's brand on the screens its clients see:
+
+```tsx
+<Base316Provider publishableKey={key} tenant={{ organizationExternalId: firm.id }}>
+```
+
+The tenant's own branding, then its parent's, then your environment's, field
+by field. Change `tenant` when the person switches team and every component
+restyles. `TeamMembers` says so when a team is reached through the firm rather
+than by membership.
+
 ## Reading the session
 
 ```tsx
 import { useSession } from "@base316/react";
 
 function Greeting() {
-  const { session, loading } = useSession();
+	const { session, loading } = useSession();
 
-  if (loading) return null;
-  return session ? <p>Hello {session.user.email}</p> : <a href="/login">Sign in</a>;
+	if (loading) return null;
+	return session ? <p>Hello {session.user.email}</p> : <a href="/login">Sign in</a>;
 }
 ```