Confidence Playbook Component Library

This package provides a set of React components and utilities for embedding and managing Confidence Playbooks in your application. All exports are available from the ConfidencePlaybook module, with several specialized subcomponents for different integration scenarios.

Exports

1. ConfidencePlaybook

The main component for rendering a playbook instance by its ID.

Props:

• playbookInstanceId (string | number): The unique instance ID of the playbook to display.
• playbookMode ("list" | "card"): Display mode for tasks.
• playbookStyle (object, optional): White-label and overlay style configuration.

Example:

<ConfidencePlaybook
  playbookInstanceId={12345}
  playbookMode="list"
  playbookStyle={{
    overlay: { position: "right", size: { width: 500 } },
    whiteLabel: { primaryColor: "#007BFF" },
  }}
/>

2. ConfidencePlaybook.AutoInstantiated

Automatically initiates a playbook for a given user/email and playbook template, then renders the playbook UI once ready.

Props:

• email (string): The user's email to initiate the playbook for.
• playbookId (string): The playbook template ID.
• playbookMode ("list" | "card"): Display mode for tasks.

Example:

<ConfidencePlaybook.AutoInstantiated
  email="[email protected]"
  playbookId="YOUR_PLAYBOOK_ID"
  playbookMode="list"
/>

3. ConfidencePlaybook.WithInstantiateButton

Renders a button that, when clicked, prompts the user for their email and then instantiates and displays the playbook.

Props:

• playbookId (string): The playbook template ID.
• playbookMode ("list" | "card", optional): Display mode for tasks (default: "list").
• playbookStyle (object, optional): White-label and overlay style configuration.
• btnLabel (string, optional): Button label (default: "Start Playbook").

Example:

<ConfidencePlaybook.WithInstantiateButton
  playbookId="YOUR_PLAYBOOK_ID"
  btnLabel="Start Playbook"
  playbookMode="card"
  playbookStyle={{
    overlay: { position: "right", size: { width: 500 } },
    whiteLabel: { primaryColor: "#007BFF" },
  }}
/>

4. ConfidencePlaybook.View

A lower-level component for rendering a playbook UI given a playbook object. Useful for advanced scenarios or custom data sources.

Props:

• playbook (Playbook): The playbook data object.
• playbookMode ("list" | "card"): Display mode for tasks.
• onTaskButtonClick (function): Handler for task button actions.
• playbookStyle (object, optional): White-label and overlay style configuration.

Example:

<ConfidencePlaybook.View
  playbook={playbookData}
  playbookMode="list"
  onTaskButtonClick={async (btn, taskId) => {
    // handle action
  }}
/>

Notes

• All components are styled with TailwindCSS and scoped under .confidence-ui.
• For more details on the playbookStyle prop and available options, see the source code or type definitions.
• These exports are designed for flexibility: use the high-level components for quick integration, or the lower-level View for custom scenarios.