@launchdarkly/toolbar 0.0.1

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

@@ -0,0 +1,99 @@
+export declare const EASING: {
+    readonly bounce: readonly [0.34, 1.56, 0.64, 1];
+    readonly smooth: readonly [0.25, 0.46, 0.45, 0.94];
+    readonly elastic: readonly [0.22, 1, 0.36, 1];
+};
+export declare const ANIMATION_CONFIG: {
+    readonly container: {
+        readonly width: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+        };
+        readonly height: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+        };
+        readonly borderRadius: {
+            readonly duration: 0.4;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+        };
+        readonly boxShadow: {
+            readonly duration: 0.3;
+            readonly ease: "easeInOut";
+        };
+    };
+    readonly circleLogo: {
+        readonly opacity: {
+            readonly duration: 0.25;
+            readonly ease: "easeOut";
+        };
+        readonly scale: {
+            readonly duration: 0.3;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+        };
+        readonly rotate: {
+            readonly duration: 0.3;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+        };
+    };
+    readonly toolbarContent: {
+        readonly opacity: {
+            readonly duration: 0.4;
+            readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+        };
+        readonly y: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+        };
+        readonly scale: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+        };
+    };
+    readonly contentArea: {
+        readonly opacity: {
+            readonly duration: 0.4;
+            readonly ease: "easeInOut";
+        };
+        readonly maxHeight: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.22, 1, 0.36, 1];
+        };
+    };
+    readonly tabContent: {
+        readonly duration: 0.3;
+        readonly ease: readonly [0.25, 0.46, 0.45, 0.94];
+    };
+    readonly tabsContainer: {
+        readonly opacity: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+        };
+        readonly y: {
+            readonly duration: 0.5;
+            readonly ease: readonly [0.34, 1.56, 0.64, 1];
+        };
+        readonly delay: 0.3;
+    };
+};
+export declare const DIMENSIONS: {
+    readonly collapsed: {
+        readonly width: 60;
+        readonly height: 60;
+        readonly borderRadius: 30;
+    };
+    readonly expanded: {
+        readonly width: 400;
+        readonly borderRadius: 12;
+    };
+    readonly scale: {
+        readonly expanded: 1.02;
+        readonly collapsed: 1;
+    };
+    readonly slideDistance: 30;
+};
+export declare const SHADOWS: {
+    readonly expanded: "0 12px 48px rgba(0, 0, 0, 0.5)";
+    readonly hoveredCollapsed: "0 8px 40px rgba(0, 0, 0, 0.4)";
+    readonly collapsed: "0 4px 16px rgba(0, 0, 0, 0.3)";
+};

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

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

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { LdToolbarConfig, ToolbarState } from '../../../types/devServer';
+interface LaunchDarklyToolbarContextValue {
+    state: ToolbarState & {
+        availableProjects: string[];
+        currentProjectKey: string | null;
+    };
+    setOverride: (flagKey: string, value: any) => Promise<void>;
+    clearOverride: (flagKey: string) => Promise<void>;
+    clearAllOverrides: () => Promise<void>;
+    refresh: () => Promise<void>;
+    switchProject: (projectKey: string) => Promise<void>;
+}
+export declare const useToolbarContext: () => LaunchDarklyToolbarContextValue;
+export interface LaunchDarklyToolbarProviderProps {
+    children: React.ReactNode;
+    config: LdToolbarConfig;
+}
+export declare const LaunchDarklyToolbarProvider: React.FC<LaunchDarklyToolbarProviderProps>;
+export {};

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

@@ -0,0 +1,10 @@
+import React, { Dispatch, type SetStateAction } from 'react';
+type SearchContextType = {
+    searchTerm: string;
+    setSearchTerm: Dispatch<SetStateAction<string>>;
+};
+export declare function SearchProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useSearchContext(): SearchContextType;
+export {};

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

@@ -0,0 +1,3 @@
+export { useToolbarState } from './useToolbarState';
+export { useToolbarAnimations } from './useToolbarAnimations';
+export { useToolbarVisibility } from './useToolbarVisibility';

package/dist/ui/Toolbar/hooks/useToolbarAnimations.d.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ANIMATION_CONFIG } from '../constants';
+export interface UseToolbarAnimationsProps {
+    showFullToolbar: boolean;
+    isHovered: boolean;
+    setIsAnimating: Dispatch<SetStateAction<boolean>>;
+}
+export interface UseToolbarAnimationsReturn {
+    containerAnimations: {
+        width: number;
+        height: string | number;
+        borderRadius: number;
+        scale: number;
+        boxShadow: string;
+    };
+    animationConfig: typeof ANIMATION_CONFIG.container;
+    handleAnimationStart: () => void;
+    handleAnimationComplete: () => void;
+}
+export declare function useToolbarAnimations(props: UseToolbarAnimationsProps): UseToolbarAnimationsReturn;

package/dist/ui/Toolbar/hooks/useToolbarState.d.ts

@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ActiveTabId } from '../types';
+export interface UseToolbarStateReturn {
+    isExpanded: boolean;
+    isHovered: boolean;
+    activeTab: ActiveTabId;
+    previousTab: ActiveTabId;
+    isAnimating: boolean;
+    searchIsExpanded: boolean;
+    showFullToolbar: boolean;
+    slideDirection: number;
+    hasBeenExpanded: boolean;
+    toolbarRef: React.RefObject<HTMLDivElement | null>;
+    handleTabChange: (tabId: string) => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleClose: () => void;
+    handleSearch: (newSearchTerm: string) => void;
+    setIsAnimating: Dispatch<SetStateAction<boolean>>;
+    setSearchIsExpanded: Dispatch<SetStateAction<boolean>>;
+}
+export declare function useToolbarState(): UseToolbarStateReturn;

package/dist/ui/Toolbar/hooks/useToolbarVisibility.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook that manages toolbar visibility based on localStorage
+ * Sets up window.ldToolbar API for easy developer control
+ */
+export declare function useToolbarVisibility(): boolean;

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

@@ -0,0 +1 @@
+export * from './toolbar';

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

@@ -0,0 +1,12 @@
+export type TabId = 'flags' | 'settings';
+export type ActiveTabId = TabId | undefined;
+export declare const TAB_ORDER: readonly TabId[];
+export interface FeatureFlag {
+    id: string;
+    name: string;
+    enabled: boolean;
+    custom: boolean;
+    description?: string;
+    lastModified?: Date;
+    environment?: string;
+}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@launchdarkly/toolbar",
+  "version": "0.0.1",
+  "description": "A React component that provides a developer-friendly toolbar for interacting with LaunchDarkly during development",
+  "keywords": [
+    "launchdarkly",
+    "feature-flags",
+    "react",
+    "toolbar",
+    "development",
+    "typescript"
+  ],
+  "type": "module",
+  "license": "Apache-2.0",
+  "author": "Catamorphic Co.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/launchdarkly/launchpad-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/launchdarkly/launchpad-ui/issues"
+  },
+  "homepage": "https://github.com/launchdarkly/launchpad-ui#readme",
+  "main": "./dist/js/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/js/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "browserslist": [
+    "last 2 versions",
+    "not dead",
+    "not IE 11"
+  ],
+  "scripts": {
+    "build": "rslib build && node scripts/fix-base-url.cjs",
+    "build:storybook": "storybook build",
+    "dev": "rslib build --watch",
+    "release": "pnpm build && npm publish",
+    "demo": "pnpm build && pnpm --filter launchdarkly-toolbar-demo dev",
+    "demo:dev": "pnpm --filter launchdarkly-toolbar-demo dev",
+    "demo:build": "pnpm build && pnpm --filter launchdarkly-toolbar-demo build",
+    "format": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest run",
+    "test:e2e:ci": "TEST_ENV=ci playwright test --config=./e2e/playwright.config.ts",
+    "test:e2e:local": "TEST_ENV=local playwright test --config=./e2e/playwright.config.ts",
+    "test:e2e:local:ui": "TEST_ENV=local playwright test --ui --config=./e2e/playwright.config.ts",
+    "test:e2e:ci:ui": "TEST_ENV=ci playwright test --ui --config=./e2e/playwright.config.ts",
+    "lint": "oxlint"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.53.1",
+    "@rsbuild/core": "1.4.12",
+    "@rsbuild/plugin-react": "^1.3.4",
+    "@rslib/core": "^0.11.1",
+    "@storybook/addon-docs": "^9.0.5",
+    "@storybook/addon-essentials": "^9.0.0-alpha.12",
+    "@storybook/addon-interactions": "^9.0.0-alpha.10",
+    "@storybook/addon-links": "^9.0.5",
+    "@storybook/addon-onboarding": "^9.0.5",
+    "@storybook/blocks": "^9.0.0-alpha.17",
+    "@storybook/react": "^9.0.5",
+    "@storybook/test": "^9.0.0-alpha.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.0.4",
+    "@types/react": "^19.1.6",
+    "@vanilla-extract/vite-plugin": "^5.1.1",
+    "http-server": "^14.1.1",
+    "jsdom": "^26.1.0",
+    "oxlint": "^1.0.0",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "storybook": "^9.0.5",
+    "storybook-addon-rslib": "^2.0.0",
+    "storybook-react-rsbuild": "^2.0.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "private": false,
+  "dependencies": {
+    "@launchpad-ui/components": "^0.10.0",
+    "@launchpad-ui/core": "^0.56.10",
+    "@launchpad-ui/tokens": "^0.12.6",
+    "@tanstack/react-virtual": "^3.13.12",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/webpack-plugin": "^2.3.22",
+    "motion": "^12.19.2"
+  }
+}