@launchdarkly/toolbar 0.10.0 → 0.11.0-beta.1

package/README.md

@@ -2,183 +2,103 @@
 
 > ⚠️ **Warning:** This package is currently not ready for production use and is considered unsupported. Features, APIs, and behavior may change without notice.
 
-A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development.
+A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development. The toolbar supports two modes:
+
+- **Dev Server Mode**: Connect to a LaunchDarkly CLI dev server for flag browsing and real-time updates
+- **SDK Mode**: Integrate with flag override plugins for local flag testing
 
 ## Installation
 
 ```bash
 npm install @launchdarkly/toolbar
-# or
-yarn add @launchdarkly/toolbar
-# or
-pnpm add @launchdarkly/toolbar
 ```
 
-1. **Import the component and styles:**
+## Quick Start
+
+**Dev Server Mode** (connects to LaunchDarkly CLI dev server):
 
 ```tsx
 import { LaunchDarklyToolbar } from '@launchdarkly/toolbar';
-```
-
-2. **Add the toolbar to your app:**
 
-```tsx
 function App() {
   return (
     <div>
-      {/* Your app content */}
       <h1>My App</h1>
-
-      {/* LaunchDarkly Toolbar */}
-      <LaunchDarklyToolbar devServerUrl="http://localhost:8765" position="right" />
+      <LaunchDarklyToolbar devServerUrl="http://localhost:8765" />
     </div>
   );
 }
 ```
 
-3. **Start your LaunchDarkly dev server:**
-
-```bash
-# Make sure your LaunchDarkly dev server is running
-# The toolbar will automatically connect and display your flags
-```
-
-## Props
-
-| Prop           | Type                | Default                   | Description                                   |
-| -------------- | ------------------- | ------------------------- | --------------------------------------------- |
-| `devServerUrl` | `string`            | `"http://localhost:8765"` | URL of your LaunchDarkly development server   |
-| `position`     | `"left" \| "right"` | `"right"`                 | Position of the toolbar on screen             |
-| `projectKey`   | `string`            | `undefined`               | Optional project key for multi-project setups |
-
-## Usage Examples
-
-### Basic Usage
+**SDK Mode** (integrates with flag override override plugins):
 
 ```tsx
 import { LaunchDarklyToolbar } from '@launchdarkly/toolbar';
+import { flagOverridePlugin } from './your-flag-override-plugin';
 
 function App() {
   return (
-    <>
-      <main>
-        <h1>My Application</h1>
-        {/* Your app content */}
-      </main>
-
-      <LaunchDarklyToolbar />
-    </>
-  );
-}
-```
-
-### Custom Configuration
-
-```tsx
-import { LaunchDarklyToolbar } from '@launchdarkly/toolbar';
-
-function App() {
-  return (
-    <>
-      <main>{/* Your app content */}</main>
-
-      <LaunchDarklyToolbar devServerUrl="http://localhost:3001" position="left" projectKey="my-project" />
-    </>
-  );
-}
-```
-
-### Usage
-
-```tsx
-import { LaunchDarklyToolbar } from '@launchdarkly/toolbar';
-
-function App() {
-  return (
-    <>
-      <main>{/* Your app content */}</main>
-
-      {/* Only show toolbar in development */}
-      {process.env.NODE_ENV === 'development' && <LaunchDarklyToolbar />}
-    </>
+    <div>
+      <h1>My App</h1>
+      <LaunchDarklyToolbar flagOverridePlugin={flagOverridePlugin} />
+    </div>
   );
 }
 ```
 
-## How It Works
-
-The LaunchDarkly Toolbar connects to your LaunchDarkly development server to provide real-time flag management capabilities:
-
-1. **Automatic Discovery** - The toolbar automatically discovers available flags from your dev server
-2. **Real-time Updates** - Flag changes are reflected immediately in your application
-3. **Event Stream** - Monitor flag evaluation events as they happen
-4. **Search & Filter** - Quickly find flags using the built-in search functionality
+## Props
 
-## Toolbar Visibility Control
+| Prop                 | Type                  | Default     | Description                                                               |
+| -------------------- | --------------------- | ----------- | ------------------------------------------------------------------------- |
+| `devServerUrl`       | `string` (optional)   | `undefined` | URL of your LaunchDarkly dev server. If provided, enables Dev Server Mode |
+| `flagOverridePlugin` | `IFlagOverridePlugin` | `undefined` | Flag override plugin for SDK Mode. Shows Overrides tab when provided      |
+| `position`           | `"left" \| "right"`   | `"right"`   | Position of the toolbar on screen                                         |
+| `projectKey`         | `string` (optional)   | `undefined` | Optional project key for multi-project setups (Dev Server Mode only)      |
+| `pollIntervalInMs`   | `number` (optional)   | `5000`      | Polling interval for dev server updates (Dev Server Mode only)            |
 
-The toolbar includes built-in visibility controls that allow developers to easily show/hide the toolbar during development. When the toolbar loads, it automatically exposes a global API on the browser's window object.
+## Configuration
 
-### Global API
+### Mode Determination
 
-The toolbar provides a `window.ldToolbar` API with the following methods:
+The toolbar automatically determines its mode:
 
-```javascript
-// Enable the toolbar (removes it from localStorage and shows the toolbar)
-window.ldToolbar.enable();
-
-// Disable the toolbar (saves preference to localStorage and hides the toolbar)
-window.ldToolbar.disable();
+- **Dev Server Mode**: When `devServerUrl` is provided
+- **SDK Mode**: When `devServerUrl` is omitted
 
-// Toggle the toolbar visibility
-window.ldToolbar.toggle();
+### Available Features by Mode
 
-// Check current status (returns true if enabled, false if disabled)
-window.ldToolbar.status();
-```
+| Mode                | Available Tabs                                         |
+| ------------------- | ------------------------------------------------------ |
+| **Dev Server Mode** | Flags, Settings                                        |
+| **SDK Mode**        | Overrides (if `flagOverridePlugin` provided), Settings |
 
-### Console Information
+## Setup
 
-When the toolbar loads, you'll see helpful console output showing the available commands:
+**Dev Server Mode**: Start your LaunchDarkly dev server with CORS enabled:
 
-```
-🔧 LaunchDarkly toolbar controls available:
-   window.ldToolbar.enable() - Enable toolbar
-   window.ldToolbar.disable() - Disable toolbar
-   window.ldToolbar.toggle() - Toggle toolbar
-   window.ldToolbar.status() - Check current status
+```bash
+ldcli dev-server start --project your-project --cors-enabled true
 ```
 
-### Persistent State
+**SDK Mode**: No additional setup required.
 
-The toolbar's visibility state is automatically saved to localStorage and persists across browser sessions. The state is also synchronized across multiple tabs of the same application.
+## Visibility Control
 
-### Usage Examples
+The toolbar provides a global API for show/hide control:
 
 ```javascript
-// Hide the toolbar for focused development
-window.ldToolbar.disable();
-// Console: ✅ LaunchDarkly toolbar disabled.
+// Toggle visibility
+window.ldToolbar.toggle();
 
-// Show the toolbar when you need it
+// Enable/disable explicitly
 window.ldToolbar.enable();
-// Console: ✅ LaunchDarkly toolbar enabled.
-
-// Check if the toolbar is currently visible
-const isEnabled = window.ldToolbar.status();
-// Console: LaunchDarkly toolbar is currently: ✅ ENABLED
-// Returns: true
+window.ldToolbar.disable();
 
-// Quick toggle
-window.ldToolbar.toggle();
+// Check current status
+window.ldToolbar.status(); // returns true/false
 ```
 
-## Development Server Setup
-
-The toolbar requires a LaunchDarkly CLI dev-server to be running with CORS enabled.
-
-```bash
-ldcli dev-server start --project demo-project --cors-enabled true
-```
+Visibility preferences are automatically saved to localStorage.
 
 ## TypeScript
 
@@ -186,12 +106,8 @@ The package includes complete TypeScript definitions. No additional `@types` pac
 
 ```tsx
 import type { LaunchDarklyToolbarProps } from '@launchdarkly/toolbar';
-
-const toolbarConfig: LaunchDarklyToolbarProps = {
-  devServerUrl: 'http://localhost:8765',
-  position: 'right',
-  projectKey: 'my-project',
-};
 ```
 
+---
+
 Built with ❤️ for the LaunchDarkly developer community.

package/dist/index.d.ts

@@ -1,3 +1,6 @@
 import './globals.css';
 export { LaunchDarklyToolbar } from './ui/Toolbar/LaunchDarklyToolbar';
 export type { LaunchDarklyToolbarProps } from './ui/Toolbar/LaunchDarklyToolbar';
+export type { IFlagOverridePlugin } from './types/plugin';
+export { FlagOverridePlugin } from './plugins';
+export type { FlagOverridePluginConfig } from './plugins';