@ganeshdole/brainbox-react 0.1.0 → 0.3.0

package/README.md

@@ -33,13 +33,30 @@ const transport = brainboxTransport({ endpoint, projectKey });
 
 export function Root() {
   return (
-    <BrainboxProvider transport={transport} identity={{ id: user.id, email: user.email }}>
+    <BrainboxProvider
+      transport={transport}
+      identity={{ id: user.id, email: user.email, name: user.name, phone: user.phone }}
+      fields={[
+        { label: "Plan", value: account.plan, highlight: true },
+        { label: "Account ID", value: account.id, type: "id" },
+      ]}
+    >
       <App />
     </BrainboxProvider>
   );
 }
 ```
 
+`identity` is who is reporting, and `fields` are your app's own details,
+whatever you want next to every report. The dashboard shows both in the
+report's "Reported by" card: the person's name, email and phone, then your
+fields with your labels, in your order. Adding one needs no change in
+Brainbox. `type` is optional: `email`,
+`phone` and `url` become links, `id` shows in monospace, anything else is
+text. `highlight: true` also puts a field's value under the person's name, for
+the one or two details that say where a report came from. Up to 30 fields,
+labels up to 60 characters, values up to 500.
+
 Your own UI on top of the engine:
 
 ```tsx
@@ -63,7 +80,9 @@ function Panel({ draft }: { draft: Draft }) {
   keeps a server render side-effect free and leaves exactly one instance
   under StrictMode's mount-unmount-mount. The cost is one render in which
   `useBrainbox()` is `null`.
-- `identity` changes call `identify()` on the live instance. `onSubmitted`
+- `identity` changes call `identify()`, and `fields` changes call
+  `setFields()`, on the live instance. The `fields` prop owns the instance's
+  fields: dropping it clears them. `onSubmitted`
   may change freely. Only a new `transport` rebuilds the instance.
 - `<BrainboxProvider brainbox={instance}>` provides an instance you created
   and own. Shells outside React (the script-tag bundle) use this.

package/dist/provider.d.ts

@@ -1,11 +1,14 @@
 import { type ReactNode } from "react";
-import { type Brainbox, type Identity, type SubmitResult, type Transport } from "@ganeshdole/brainbox-core";
+import { type Brainbox, type Identity, type ReportField, type SubmitResult, type Transport } from "@ganeshdole/brainbox-core";
 interface OwnedProps {
     /** Where finished reports go. Keep it stable (module-level or `useMemo`):
      *  a new transport means a new instance. */
     transport: Transport;
     /** Who is filing. Changing it calls `identify()` on the live instance. */
     identity?: Identity;
+    /** Your app's own details for every report (clinic, plan, ...). Changing it
+     *  calls `setFields()` on the live instance. */
+    fields?: ReportField[];
     /** Called after every successful submit. May change between renders. */
     onSubmitted?: (result: SubmitResult) => void;
     brainbox?: never;
@@ -17,6 +20,7 @@ interface GivenProps {
     brainbox: Brainbox;
     transport?: never;
     identity?: never;
+    fields?: never;
     onSubmitted?: never;
 }
 export type BrainboxProviderProps = (OwnedProps | GivenProps) & {

package/dist/provider.js

@@ -17,7 +17,7 @@ export function BrainboxProvider(props) {
     }
     return _jsx(OwnedProvider, { ...props });
 }
-function OwnedProvider({ transport, identity, onSubmitted, children, }) {
+function OwnedProvider({ transport, identity, fields, onSubmitted, children, }) {
     const [brainbox, setBrainbox] = useState(null);
     // Read through refs so a new callback or identity does not rebuild the instance.
     const onSubmittedRef = useRef(onSubmitted);
@@ -28,10 +28,15 @@ function OwnedProvider({ transport, identity, onSubmitted, children, }) {
     useEffect(() => {
         identityRef.current = identity;
     }, [identity]);
+    const fieldsRef = useRef(fields);
+    useEffect(() => {
+        fieldsRef.current = fields;
+    }, [fields]);
     useEffect(() => {
         const options = {
             transport,
             identity: identityRef.current,
+            fields: fieldsRef.current,
             onSubmitted: (result) => onSubmittedRef.current?.(result),
         };
         const instance = createBrainbox(options);
@@ -45,6 +50,11 @@ function OwnedProvider({ transport, identity, onSubmitted, children, }) {
         if (brainbox && identity)
             brainbox.identify(identity);
     }, [brainbox, identity]);
+    // The prop owns the instance's fields: dropping it clears them, so a
+    // signed-out user's reports never carry the previous account's details.
+    useEffect(() => {
+        brainbox?.setFields(fields ?? []);
+    }, [brainbox, fields]);
     return _jsx(BrainboxContext.Provider, { value: brainbox, children: children });
 }
 /** The nearest provider's instance. `null` during the first render and on the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ganeshdole/brainbox-react",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "React bindings for @ganeshdole/brainbox-core: a provider that owns one Brainbox instance and hooks that read it. No UI.",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://www.brainbox.sh",
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ganeshdole/brainbox-core": "0.1.0"
+    "@ganeshdole/brainbox-core": "0.3.0"
   },
   "peerDependencies": {
     "react": "^19.0.0"