@launchdarkly/toolbar 0.10.1 → 0.11.0-beta.1

package/dist/plugins/FlagOverridePlugin.d.ts

@@ -0,0 +1,57 @@
+import type { LDClient, LDPlugin, LDDebugOverride, LDPluginMetadata } from 'launchdarkly-js-client-sdk';
+/**
+ * Configuration options for the FlagOverridePlugin
+ */
+export type FlagOverridePluginConfig = {
+    /** Namespace for localStorage keys. Defaults to 'ld-flag-override' */
+    storageNamespace?: string;
+};
+export declare class FlagOverridePlugin implements LDPlugin {
+    private debugOverride?;
+    private config;
+    private ldClient;
+    constructor(config?: FlagOverridePluginConfig);
+    /**
+     * Returns plugin metadata
+     */
+    getMetadata(): LDPluginMetadata;
+    /**
+     * Called when the plugin is registered with the LaunchDarkly client
+     */
+    register(ldClient: LDClient): void;
+    /**
+     * Called when the debug interface is available
+     * Loads any existing overrides from localStorage
+     */
+    registerDebug(debugOverride: LDDebugOverride): void;
+    private loadExistingOverrides;
+    /**
+     * Sets an override value for a feature flag and persists it to localStorage
+     * @param flagKey - The key of the flag to override
+     * @param value - The value to set for the flag
+     */
+    setOverride(flagKey: string, value: unknown): void;
+    /**
+     * Removes an override for a specific feature flag
+     * @param flagKey - The key of the flag to remove the override for
+     */
+    removeOverride(flagKey: string): void;
+    /**
+     * Clears all feature flag overrides from both memory and localStorage
+     */
+    clearAllOverrides(): void;
+    /**
+     * Returns all currently active feature flag overrides
+     * @returns Record of flag keys to their override values
+     */
+    getAllOverrides(): Record<string, unknown>;
+    /**
+     * Returns the LaunchDarkly client instance
+     * @returns The LaunchDarkly client
+     */
+    getClient(): LDClient | null;
+    private getStorage;
+    private persistOverride;
+    private removePersistedOverride;
+    private clearPersistedOverrides;
+}

package/dist/plugins/index.d.ts

@@ -0,0 +1,2 @@
+export { FlagOverridePlugin } from './FlagOverridePlugin';
+export type { FlagOverridePluginConfig } from './FlagOverridePlugin';

package/dist/tests/DevServerProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/ExpandedToolbarContent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/FlagSdkOverrideProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/devServer.d.ts

@@ -12,11 +12,11 @@ export interface EnhancedFlag {
     enabled: boolean;
 }
 export interface LdToolbarConfig {
-    devServerUrl: string;
+    devServerUrl?: string;
     pollIntervalInMs: number;
     projectKey?: string;
     showEnvironmentInfo?: boolean;
-    onFlagOverride?: (flagKey: string, value: any, isOverride: boolean) => void;
+    onDebugOverride?: (flagKey: string, value: any, isOverride: boolean) => void;
     onError?: (error: string) => void;
 }
 export interface ToolbarState {

package/dist/types/plugin.d.ts

@@ -0,0 +1,31 @@
+import type { LDClient, LDDebugOverride, LDFlagSet, LDFlagValue, LDPlugin } from 'launchdarkly-js-client-sdk';
+/**
+ * Interface for flag override plugins that can be used with the LaunchDarkly Toolbar
+ */
+export interface IFlagOverridePlugin extends LDPlugin, LDDebugOverride {
+    /**
+     * Sets an override value for a feature flag
+     * @param flagKey - The key of the flag to override
+     * @param value - The value to set for the flag
+     */
+    setOverride(flagKey: string, value: LDFlagValue): void;
+    /**
+     * Removes an override for a specific feature flag
+     * @param flagKey - The key of the flag to remove the override for
+     */
+    removeOverride(flagKey: string): void;
+    /**
+     * Clears all feature flag overrides
+     */
+    clearAllOverrides(): void;
+    /**
+     * Returns all currently active feature flag overrides
+     * @returns Record of flag keys to their override values
+     */
+    getAllOverrides(): LDFlagSet;
+    /**
+     * Returns the LaunchDarkly client instance
+     * @returns The LaunchDarkly client with allFlags method
+     */
+    getClient(): LDClient | null;
+}

package/dist/ui/Toolbar/Header/Header.d.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
+import { ToolbarMode } from '../types/toolbar';
 export interface HeaderProps {
     searchTerm: string;
     onSearch: (searchTerm: string) => void;
@@ -6,5 +7,6 @@ export interface HeaderProps {
     searchIsExpanded: boolean;
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
     label: string;
+    mode: ToolbarMode;
 }
 export declare function Header(props: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toolbar/Header/components/ActionButtons.d.ts

@@ -5,6 +5,7 @@ interface ActionButtonsProps {
     onClose: () => void;
     onRefresh: () => void;
     showSearchButton: boolean;
+    showRefreshButton: boolean;
 }
 export declare function ActionButtons(props: ActionButtonsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/Toolbar/LaunchDarklyToolbar.d.ts

@@ -1,8 +1,14 @@
-import { ToolbarPosition } from './types/toolbar';
-export declare function LdToolbar(): import("react/jsx-runtime").JSX.Element;
+import { ToolbarMode, ToolbarPosition } from './types/toolbar';
+import type { IFlagOverridePlugin } from '../../types/plugin';
+export interface LdToolbarProps {
+    flagOverridePlugin?: IFlagOverridePlugin;
+    mode: ToolbarMode;
+}
+export declare function LdToolbar(props: LdToolbarProps): import("react/jsx-runtime").JSX.Element;
 export interface LaunchDarklyToolbarProps {
     devServerUrl?: string;
     projectKey?: string;
+    flagOverridePlugin?: IFlagOverridePlugin;
     pollIntervalInMs?: number;
     position?: ToolbarPosition;
 }

package/dist/ui/Toolbar/TabContent/FlagDevServerTabContent.d.ts

@@ -0,0 +1 @@
+export declare function FlagDevServerTabContent(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toolbar/TabContent/FlagSdkOverrideTabContent.d.ts

@@ -0,0 +1,6 @@
+import type { IFlagOverridePlugin } from '../../../types/plugin';
+interface FlagSdkOverrideTabContentProps {
+    flagOverridePlugin?: IFlagOverridePlugin;
+}
+export declare function FlagSdkOverrideTabContent(props: FlagSdkOverrideTabContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/Toolbar/TabContent/SettingsTabContent.d.ts

@@ -1 +1,6 @@
-export declare function SettingsTabContent(): import("react/jsx-runtime").JSX.Element;
+import { type ToolbarMode } from '../types/toolbar';
+interface SettingsTabContentProps {
+    mode: ToolbarMode;
+}
+export declare function SettingsTabContent(props: SettingsTabContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/Toolbar/components/ExpandedToolbarContent.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
-import { ActiveTabId } from '../types';
+import { ActiveTabId, ToolbarMode } from '../types';
+import type { IFlagOverridePlugin } from '../../../types/plugin';
 interface ExpandedToolbarContentProps {
     isExpanded: boolean;
     activeTab: ActiveTabId;
@@ -10,6 +11,8 @@ interface ExpandedToolbarContentProps {
     onClose: () => void;
     onTabChange: (tabId: string) => void;
     setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    mode: ToolbarMode;
 }
 export declare function ExpandedToolbarContent(props: ExpandedToolbarContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/Toolbar/components/LocalFlagControls.css.d.ts

@@ -0,0 +1,4 @@
+export declare const jsonTextarea: string;
+export declare const jsonTextareaError: string;
+export declare const jsonButtonGroup: string;
+export declare const jsonParseError: string;

package/dist/ui/Toolbar/components/LocalFlagControls.d.ts

@@ -0,0 +1,20 @@
+import type { LocalFlag } from '../context';
+interface LocalBooleanFlagControlProps {
+    flag: LocalFlag;
+    onOverride: (value: boolean) => void;
+    disabled?: boolean;
+}
+export declare function LocalBooleanFlagControl(props: LocalBooleanFlagControlProps): import("react/jsx-runtime").JSX.Element;
+interface LocalStringNumberFlagControlProps {
+    flag: LocalFlag;
+    onOverride: (value: string | number) => void;
+    disabled?: boolean;
+}
+export declare function LocalStringNumberFlagControl(props: LocalStringNumberFlagControlProps): import("react/jsx-runtime").JSX.Element;
+interface LocalObjectFlagControlProps {
+    flag: LocalFlag;
+    onOverride: (value: any) => void;
+    disabled?: boolean;
+}
+export declare function LocalObjectFlagControl(props: LocalObjectFlagControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/Toolbar/components/TabContentRenderer.d.ts

@@ -1,7 +1,10 @@
-import { TabId } from '../types';
+import { TabId, ToolbarMode } from '../types';
+import type { IFlagOverridePlugin } from '../../../types/plugin';
 interface TabContentRendererProps {
     activeTab: TabId;
     slideDirection: number;
+    flagOverridePlugin?: IFlagOverridePlugin;
+    mode: ToolbarMode;
 }
 export declare function TabContentRenderer(props: TabContentRendererProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/ui/Toolbar/constants/index.d.ts

@@ -1,2 +1,2 @@
 export { EASING, ANIMATION_CONFIG, DIMENSIONS, SHADOWS } from './animations';
-export { TOOLBAR_CONFIG } from './config';
+export { VIRTUALIZATION } from './virtualization';

package/dist/ui/Toolbar/constants/virtualization.d.ts

@@ -0,0 +1,4 @@
+export declare const VIRTUALIZATION: {
+    readonly ITEM_HEIGHT: 85;
+    readonly OVERSCAN: 5;
+};

package/dist/ui/Toolbar/context/{LaunchDarklyToolbarProvider.d.ts → DevServerProvider.d.ts}

@@ -1,7 +1,7 @@
-import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { LdToolbarConfig, ToolbarState } from '../../../types/devServer';
 import { ToolbarPosition } from '../types/toolbar';
-interface LaunchDarklyToolbarContextValue {
+interface DevServerContextValue {
     state: ToolbarState & {
         availableProjects: string[];
         currentProjectKey: string | null;
@@ -14,11 +14,11 @@ interface LaunchDarklyToolbarContextValue {
     switchProject: (projectKey: string) => Promise<void>;
     handlePositionChange: (position: ToolbarPosition) => void;
 }
-export declare const useToolbarContext: () => LaunchDarklyToolbarContextValue;
-export interface LaunchDarklyToolbarProviderProps {
-    children: React.ReactNode;
+export declare const useDevServerContext: () => DevServerContextValue;
+export interface DevServerProviderProps {
+    children: ReactNode;
     config: LdToolbarConfig;
     initialPosition?: ToolbarPosition;
 }
-export declare const LaunchDarklyToolbarProvider: React.FC<LaunchDarklyToolbarProviderProps>;
+export declare const DevServerProvider: FC<DevServerProviderProps>;
 export {};

package/dist/ui/Toolbar/context/FlagSdkOverrideProvider.d.ts

@@ -0,0 +1,19 @@
+import type { IFlagOverridePlugin } from '../../../types/plugin';
+interface LocalFlag {
+    key: string;
+    name: string;
+    currentValue: any;
+    isOverridden: boolean;
+    type: 'boolean' | 'string' | 'number' | 'object';
+}
+interface FlagSdkOverrideContextType {
+    flags: Record<string, LocalFlag>;
+    isLoading: boolean;
+}
+interface FlagSdkOverrideProviderProps {
+    children: React.ReactNode;
+    flagOverridePlugin: IFlagOverridePlugin;
+}
+export declare function FlagSdkOverrideProvider({ children, flagOverridePlugin }: FlagSdkOverrideProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useFlagSdkOverrideContext(): FlagSdkOverrideContextType;
+export type { LocalFlag, FlagSdkOverrideContextType };

package/dist/ui/Toolbar/context/index.d.ts

@@ -0,0 +1,3 @@
+export { DevServerProvider, useDevServerContext } from './DevServerProvider';
+export { SearchProvider, useSearchContext } from './SearchProvider';
+export { FlagSdkOverrideProvider, useFlagSdkOverrideContext, type LocalFlag, type FlagSdkOverrideContextType, } from './FlagSdkOverrideProvider';

package/dist/ui/Toolbar/types/toolbar.d.ts

@@ -1,6 +1,12 @@
-export type TabId = 'flags' | 'settings';
+export type TabId = 'flag-sdk' | 'flag-dev-server' | 'settings';
 export type ActiveTabId = TabId | undefined;
 export declare const TAB_ORDER: readonly TabId[];
+export type ToolbarMode = 'dev-server' | 'sdk';
+export declare const DEV_SERVER_TABS: readonly TabId[];
+export declare const SDK_MODE_TABS: readonly TabId[];
+export declare function getToolbarMode(devServerUrl?: string): ToolbarMode;
+export declare function getTabsForMode(mode: ToolbarMode, hasFlagOverridePlugin: boolean): readonly TabId[];
+export declare function getDefaultActiveTab(mode: ToolbarMode): TabId;
 export interface FeatureFlag {
     id: string;
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchdarkly/toolbar",
-  "version": "0.10.1",
+  "version": "0.11.0-beta.1",
   "description": "A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development",
   "keywords": [
     "launchdarkly",
@@ -80,6 +80,7 @@
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "http-server": "^14.1.1",
     "jsdom": "^26.1.0",
+    "launchdarkly-js-client-sdk": "^3.9.0",
     "oxlint": "^1.0.0",
     "prettier": "^3.5.3",
     "react": "^19.1.1",
@@ -91,8 +92,9 @@
     "webpack": "5.101.3"
   },
   "peerDependencies": {
-    "react": "19.1.1",
-    "react-dom": "19.1.1"
+    "launchdarkly-js-client-sdk": "^3.9.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "private": false,
   "publishConfig": {

package/dist/ui/Toolbar/TabContent/FlagTabContent.d.ts

@@ -1 +0,0 @@
-export declare function FlagTabContent(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toolbar/constants/config.d.ts

@@ -1,3 +0,0 @@
-export declare const TOOLBAR_CONFIG: {
-    readonly defaultActiveTab: "flags";
-};