@localflag/react 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 localflag - Daniel Gietmann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,170 @@
+# @localflag/react
+
+Type-safe feature flags for React with built-in DevTools.
+
+## Installation
+
+```bash
+npm install @localflag/react
+```
+
+## Quick Start
+
+```tsx
+import { FeatureFlagProvider, useFeatureFlag, DevTools } from '@localflag/react';
+
+// 1. Define your flags
+const defaultFlags = {
+  darkMode: false,
+  newCheckout: true,
+  maxItems: 10,
+} as const;
+
+// 2. Create a type for your flags
+type AppFlags = typeof defaultFlags;
+
+// 3. Wrap your app with the provider
+function App() {
+  return (
+    <FeatureFlagProvider<AppFlags> defaultFlags={defaultFlags}>
+      <MyApp />
+      <DevTools /> {/* Optional: adds a floating panel to toggle flags */}
+    </FeatureFlagProvider>
+  );
+}
+
+// 4. Use flags in your components
+function MyComponent() {
+  const isDarkMode = useFeatureFlag<AppFlags>('darkMode');
+
+  return <div className={isDarkMode ? 'dark' : 'light'}>...</div>;
+}
+```
+
+## API
+
+### `FeatureFlagProvider`
+
+The context provider that makes feature flags available to your app.
+
+```tsx
+<FeatureFlagProvider<AppFlags>
+  defaultFlags={defaultFlags}
+  storageKey="my-app-flags"    // Optional: localStorage key (default: 'feature-flags')
+  persistOverrides={true}       // Optional: persist overrides to localStorage (default: true)
+>
+  {children}
+</FeatureFlagProvider>
+```
+
+### Hooks
+
+#### `useFeatureFlag<T>(flagName)`
+
+Returns `true` if the flag is enabled (truthy), `false` otherwise.
+
+```tsx
+const isEnabled = useFeatureFlag<AppFlags>('darkMode');
+// Returns: boolean
+```
+
+#### `useFeatureFlagValue<T>(flagName)`
+
+Returns the actual value of the flag.
+
+```tsx
+const maxItems = useFeatureFlagValue<AppFlags>('maxItems');
+// Returns: 10 (the actual value)
+```
+
+#### `useFeatureFlags<T>()`
+
+Returns all current flag values.
+
+```tsx
+const flags = useFeatureFlags<AppFlags>();
+// Returns: { darkMode: false, newCheckout: true, maxItems: 10 }
+```
+
+#### `useFeatureFlagControls<T>()`
+
+Returns functions to control flags programmatically.
+
+```tsx
+const { setFlag, resetFlags } = useFeatureFlagControls<AppFlags>();
+
+// Set a specific flag
+setFlag('darkMode', true);
+
+// Reset all flags to defaults
+resetFlags();
+```
+
+### Components
+
+#### `FeatureFlag`
+
+Conditionally render content based on a flag.
+
+```tsx
+import { FeatureFlag } from '@localflag/react';
+
+<FeatureFlag<AppFlags> flag="newCheckout">
+  <NewCheckoutFlow />
+</FeatureFlag>
+
+// With fallback
+<FeatureFlag<AppFlags> flag="newCheckout" fallback={<OldCheckout />}>
+  <NewCheckoutFlow />
+</FeatureFlag>
+```
+
+#### `DevTools`
+
+A floating panel for toggling flags during development.
+
+```tsx
+import { DevTools } from '@localflag/react';
+
+<DevTools
+  position="bottom-right"  // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+  defaultOpen={false}      // Start expanded or collapsed
+/>
+```
+
+## TypeScript
+
+The library is fully typed. Define your flags with `as const` to get full type inference:
+
+```tsx
+const defaultFlags = {
+  darkMode: false,
+  newFeature: true,
+  apiVersion: 'v2',
+  maxRetries: 3,
+} as const;
+
+type AppFlags = typeof defaultFlags;
+
+// Now all hooks will autocomplete flag names and infer value types
+const version = useFeatureFlagValue<AppFlags>('apiVersion');
+// TypeScript knows this is 'v2' (string literal type)
+```
+
+## Persistence
+
+By default, flag overrides are persisted to `localStorage`. This means:
+
+- Flags you toggle in DevTools persist across page reloads
+- Each user can have their own overrides for testing
+- Call `resetFlags()` to clear all overrides and return to defaults
+
+To disable persistence:
+
+```tsx
+<FeatureFlagProvider defaultFlags={defaultFlags} persistOverrides={false}>
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type FlagValue = boolean | string | number;
+interface FeatureFlags {
+    [key: string]: FlagValue;
+}
+interface FeatureFlagContextValue<T extends FeatureFlags = FeatureFlags> {
+    flags: T;
+    isEnabled: (flagName: keyof T) => boolean;
+    getValue: <K extends keyof T>(flagName: K) => T[K];
+    setFlag: <K extends keyof T>(flagName: K, value: T[K]) => void;
+    resetFlags: () => void;
+}
+interface FeatureFlagProviderProps<T extends FeatureFlags = FeatureFlags> {
+    children: React.ReactNode;
+    defaultFlags: T;
+    storageKey?: string;
+    persistOverrides?: boolean;
+}
+
+declare function FeatureFlagProvider<T extends FeatureFlags>({ children, defaultFlags, storageKey, persistOverrides, }: FeatureFlagProviderProps<T>): react_jsx_runtime.JSX.Element;
+declare function useFeatureFlagContext<T extends FeatureFlags = FeatureFlags>(): FeatureFlagContextValue<T>;
+
+/**
+ * Hook to check if a feature flag is enabled (truthy)
+ */
+declare function useFeatureFlag<T extends FeatureFlags = FeatureFlags>(flagName: keyof T): boolean;
+/**
+ * Hook to get the raw value of a feature flag
+ */
+declare function useFeatureFlagValue<T extends FeatureFlags = FeatureFlags, K extends keyof T = keyof T>(flagName: K): T[K];
+/**
+ * Hook to get all feature flags
+ */
+declare function useFeatureFlags<T extends FeatureFlags = FeatureFlags>(): T;
+/**
+ * Hook to get flag controls (setFlag, resetFlags)
+ */
+declare function useFeatureFlagControls<T extends FeatureFlags = FeatureFlags>(): {
+    setFlag: <K extends keyof T>(flagName: K, value: T[K]) => void;
+    resetFlags: () => void;
+};
+/**
+ * Component wrapper that renders children only if flag is enabled
+ */
+declare function FeatureFlag<T extends FeatureFlags = FeatureFlags>({ flag, children, fallback, }: {
+    flag: keyof T;
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+}): React.ReactNode;
+
+interface DevToolsProps {
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    defaultOpen?: boolean;
+}
+declare function DevTools({ position, defaultOpen, }: DevToolsProps): react_jsx_runtime.JSX.Element | null;
+
+export { DevTools, FeatureFlag, type FeatureFlagContextValue, FeatureFlagProvider, type FeatureFlagProviderProps, type FeatureFlags, type FlagValue, useFeatureFlag, useFeatureFlagContext, useFeatureFlagControls, useFeatureFlagValue, useFeatureFlags };

package/dist/index.js

@@ -0,0 +1,467 @@
+// src/context.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var FeatureFlagContext = createContext(null);
+var STORAGE_KEY_DEFAULT = "localflag:overrides";
+function getStoredOverrides(storageKey) {
+  if (typeof window === "undefined") return {};
+  try {
+    const stored = localStorage.getItem(storageKey);
+    return stored ? JSON.parse(stored) : {};
+  } catch {
+    return {};
+  }
+}
+function setStoredOverrides(storageKey, overrides) {
+  if (typeof window === "undefined") return;
+  try {
+    if (Object.keys(overrides).length === 0) {
+      localStorage.removeItem(storageKey);
+    } else {
+      localStorage.setItem(storageKey, JSON.stringify(overrides));
+    }
+  } catch {
+  }
+}
+var listeners = /* @__PURE__ */ new Set();
+var currentState = null;
+function subscribeToFlagChanges(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function getFlagState() {
+  return currentState;
+}
+function notifyListeners() {
+  listeners.forEach((listener) => listener());
+}
+function FeatureFlagProvider({
+  children,
+  defaultFlags,
+  storageKey = STORAGE_KEY_DEFAULT,
+  persistOverrides = true
+}) {
+  const [overrides, setOverrides] = useState(
+    () => persistOverrides ? getStoredOverrides(storageKey) : {}
+  );
+  const flags = useMemo(
+    () => ({ ...defaultFlags, ...overrides }),
+    [defaultFlags, overrides]
+  );
+  useEffect(() => {
+    currentState = { flags, defaultFlags };
+    notifyListeners();
+  }, [flags, defaultFlags]);
+  useEffect(() => {
+    if (persistOverrides) {
+      setStoredOverrides(storageKey, overrides);
+    }
+  }, [overrides, storageKey, persistOverrides]);
+  const isEnabled = useCallback(
+    (flagName) => {
+      const value2 = flags[flagName];
+      return Boolean(value2);
+    },
+    [flags]
+  );
+  const getValue = useCallback(
+    (flagName) => {
+      return flags[flagName];
+    },
+    [flags]
+  );
+  const setFlag = useCallback((flagName, value2) => {
+    setOverrides((prev) => ({ ...prev, [flagName]: value2 }));
+  }, []);
+  const resetFlags = useCallback(() => {
+    setOverrides({});
+  }, []);
+  const value = useMemo(
+    () => ({
+      flags,
+      isEnabled,
+      getValue,
+      setFlag,
+      resetFlags
+    }),
+    [flags, isEnabled, getValue, setFlag, resetFlags]
+  );
+  return /* @__PURE__ */ jsx(FeatureFlagContext.Provider, { value, children });
+}
+function useFeatureFlagContext() {
+  const context = useContext(FeatureFlagContext);
+  if (!context) {
+    throw new Error(
+      "useFeatureFlagContext must be used within a FeatureFlagProvider"
+    );
+  }
+  return context;
+}
+function useFlagState() {
+  return useSyncExternalStore(
+    subscribeToFlagChanges,
+    getFlagState,
+    () => null
+  );
+}
+
+// src/hooks.ts
+import { useMemo as useMemo2 } from "react";
+function useFeatureFlag(flagName) {
+  const { isEnabled } = useFeatureFlagContext();
+  return isEnabled(flagName);
+}
+function useFeatureFlagValue(flagName) {
+  const { getValue } = useFeatureFlagContext();
+  return getValue(flagName);
+}
+function useFeatureFlags() {
+  const { flags } = useFeatureFlagContext();
+  return flags;
+}
+function useFeatureFlagControls() {
+  const { setFlag, resetFlags } = useFeatureFlagContext();
+  return useMemo2(() => ({ setFlag, resetFlags }), [setFlag, resetFlags]);
+}
+function FeatureFlag({
+  flag,
+  children,
+  fallback = null
+}) {
+  const enabled = useFeatureFlag(flag);
+  return enabled ? children : fallback;
+}
+
+// src/devtools.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var positionStyles = {
+  "bottom-right": { bottom: 16, right: 16 },
+  "bottom-left": { bottom: 16, left: 16 },
+  "top-right": { top: 16, right: 16 },
+  "top-left": { top: 16, left: 16 }
+};
+var baseStyles = {
+  position: "fixed",
+  zIndex: 99999,
+  fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+  fontSize: 13
+};
+var panelStyles = {
+  backgroundColor: "#1a1a2e",
+  border: "1px solid #2d2d44",
+  borderRadius: 8,
+  boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+  overflow: "hidden",
+  minWidth: 280,
+  maxWidth: 360,
+  maxHeight: "70vh"
+};
+var headerStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 12px",
+  backgroundColor: "#16162a",
+  borderBottom: "1px solid #2d2d44",
+  cursor: "pointer",
+  userSelect: "none"
+};
+var titleStyles = {
+  color: "#e0e0e0",
+  fontWeight: 600,
+  fontSize: 12,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+};
+var contentStyles = {
+  padding: 0,
+  overflowY: "auto",
+  maxHeight: "calc(70vh - 50px)"
+};
+var flagRowStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 12px",
+  borderBottom: "1px solid #2d2d44",
+  transition: "background-color 0.15s"
+};
+var flagNameStyles = {
+  color: "#c0c0c0",
+  fontSize: 13,
+  fontWeight: 500,
+  flex: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var toggleStyles = {
+  position: "relative",
+  width: 40,
+  height: 22,
+  backgroundColor: "#3d3d5c",
+  borderRadius: 11,
+  cursor: "pointer",
+  transition: "background-color 0.2s",
+  flexShrink: 0,
+  border: "none",
+  padding: 0
+};
+var toggleActiveStyles = {
+  ...toggleStyles,
+  backgroundColor: "#4ade80"
+};
+var toggleKnobStyles = {
+  position: "absolute",
+  top: 2,
+  left: 2,
+  width: 18,
+  height: 18,
+  backgroundColor: "#fff",
+  borderRadius: "50%",
+  transition: "transform 0.2s",
+  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+};
+var toggleKnobActiveStyles = {
+  ...toggleKnobStyles,
+  transform: "translateX(18px)"
+};
+var inputStyles = {
+  backgroundColor: "#2d2d44",
+  border: "1px solid #3d3d5c",
+  borderRadius: 4,
+  color: "#e0e0e0",
+  padding: "4px 8px",
+  fontSize: 12,
+  width: 80,
+  outline: "none"
+};
+var badgeStyles = {
+  backgroundColor: "#4ade80",
+  color: "#1a1a2e",
+  fontSize: 10,
+  fontWeight: 700,
+  padding: "2px 6px",
+  borderRadius: 4,
+  marginLeft: 6
+};
+var overrideBadgeStyles = {
+  backgroundColor: "#f59e0b",
+  color: "#1a1a2e",
+  fontSize: 9,
+  fontWeight: 600,
+  padding: "1px 4px",
+  borderRadius: 3,
+  marginLeft: 6
+};
+var buttonStyles = {
+  backgroundColor: "transparent",
+  border: "none",
+  color: "#888",
+  cursor: "pointer",
+  padding: 4,
+  borderRadius: 4,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "color 0.15s, background-color 0.15s"
+};
+var resetButtonStyles = {
+  backgroundColor: "#2d2d44",
+  border: "1px solid #3d3d5c",
+  borderRadius: 4,
+  color: "#c0c0c0",
+  padding: "6px 12px",
+  fontSize: 11,
+  cursor: "pointer",
+  margin: "8px 12px 12px",
+  width: "calc(100% - 24px)",
+  transition: "background-color 0.15s"
+};
+var fabStyles = {
+  width: 48,
+  height: 48,
+  borderRadius: "50%",
+  backgroundColor: "#4ade80",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  boxShadow: "0 4px 12px rgba(74, 222, 128, 0.4)",
+  transition: "transform 0.15s, box-shadow 0.15s"
+};
+function FlagIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }),
+        /* @__PURE__ */ jsx2("line", { x1: "4", y1: "22", x2: "4", y2: "15" })
+      ]
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx2("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx2("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function FlagRow({
+  name,
+  value,
+  defaultValue,
+  onToggle,
+  onChange
+}) {
+  const isOverridden = value !== defaultValue;
+  const isBoolean = typeof value === "boolean";
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    const num = Number(newValue);
+    if (!isNaN(num) && newValue !== "") {
+      onChange(num);
+    } else {
+      onChange(newValue);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: flagRowStyles, children: [
+    /* @__PURE__ */ jsxs("span", { style: flagNameStyles, children: [
+      name,
+      isOverridden && /* @__PURE__ */ jsx2("span", { style: overrideBadgeStyles, children: "override" })
+    ] }),
+    isBoolean ? /* @__PURE__ */ jsx2(
+      "button",
+      {
+        style: value ? toggleActiveStyles : toggleStyles,
+        onClick: onToggle,
+        type: "button",
+        "aria-label": `Toggle ${name}`,
+        children: /* @__PURE__ */ jsx2("span", { style: value ? toggleKnobActiveStyles : toggleKnobStyles })
+      }
+    ) : /* @__PURE__ */ jsx2(
+      "input",
+      {
+        style: inputStyles,
+        type: "text",
+        value: String(value),
+        onChange: handleInputChange
+      }
+    )
+  ] });
+}
+function DevToolsInner({
+  position,
+  defaultOpen
+}) {
+  const [isOpen, setIsOpen] = useState2(defaultOpen);
+  const flagState = useFlagState();
+  const context = useFeatureFlagContext();
+  if (!flagState) {
+    return null;
+  }
+  const { setFlag, resetFlags } = context;
+  const { flags, defaultFlags } = flagState;
+  const flagEntries = Object.entries(flags);
+  const overrideCount = flagEntries.filter(
+    ([key, value]) => value !== defaultFlags[key]
+  ).length;
+  const handleToggle = (key) => {
+    const currentValue = flags[key];
+    if (typeof currentValue === "boolean") {
+      setFlag(key, !currentValue);
+    }
+  };
+  const handleChange = (key, value) => {
+    setFlag(key, value);
+  };
+  if (!isOpen) {
+    return /* @__PURE__ */ jsx2("div", { style: { ...baseStyles, ...positionStyles[position] }, children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        style: fabStyles,
+        onClick: () => setIsOpen(true),
+        type: "button",
+        "aria-label": "Open feature flags devtools",
+        children: /* @__PURE__ */ jsx2("span", { style: { color: "#1a1a2e" }, children: /* @__PURE__ */ jsx2(FlagIcon, {}) })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx2("div", { style: { ...baseStyles, ...positionStyles[position] }, children: /* @__PURE__ */ jsxs("div", { style: panelStyles, children: [
+    /* @__PURE__ */ jsxs("div", { style: headerStyles, onClick: () => setIsOpen(false), children: [
+      /* @__PURE__ */ jsxs("span", { style: titleStyles, children: [
+        /* @__PURE__ */ jsx2(FlagIcon, {}),
+        "Feature Flags",
+        overrideCount > 0 && /* @__PURE__ */ jsx2("span", { style: badgeStyles, children: overrideCount })
+      ] }),
+      /* @__PURE__ */ jsx2("button", { style: buttonStyles, type: "button", "aria-label": "Close", children: /* @__PURE__ */ jsx2(CloseIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { style: contentStyles, children: flagEntries.map(([key, value]) => /* @__PURE__ */ jsx2(
+      FlagRow,
+      {
+        name: key,
+        value,
+        defaultValue: defaultFlags[key],
+        onToggle: () => handleToggle(key),
+        onChange: (newValue) => handleChange(key, newValue)
+      },
+      key
+    )) }),
+    overrideCount > 0 && /* @__PURE__ */ jsx2("button", { style: resetButtonStyles, onClick: resetFlags, type: "button", children: "Reset all overrides" })
+  ] }) });
+}
+function DevTools({
+  position = "bottom-right",
+  defaultOpen = false
+}) {
+  const isDev = typeof __DEV__ !== "undefined" ? __DEV__ : true;
+  if (!isDev) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(DevToolsInner, { position, defaultOpen });
+}
+export {
+  DevTools,
+  FeatureFlag,
+  FeatureFlagProvider,
+  useFeatureFlag,
+  useFeatureFlagContext,
+  useFeatureFlagControls,
+  useFeatureFlagValue,
+  useFeatureFlags
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/hooks.ts","../src/devtools.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport type {\n  FeatureFlagContextValue,\n  FeatureFlagProviderProps,\n  FeatureFlags,\n} from \"./types\";\n\nconst FeatureFlagContext = createContext<FeatureFlagContextValue | null>(null);\n\nconst STORAGE_KEY_DEFAULT = \"localflag:overrides\";\n\nfunction getStoredOverrides<T extends FeatureFlags>(\n  storageKey: string\n): Partial<T> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const stored = localStorage.getItem(storageKey);\n    return stored ? JSON.parse(stored) : {};\n  } catch {\n    return {};\n  }\n}\n\nfunction setStoredOverrides<T extends FeatureFlags>(\n  storageKey: string,\n  overrides: Partial<T>\n): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    if (Object.keys(overrides).length === 0) {\n      localStorage.removeItem(storageKey);\n    } else {\n      localStorage.setItem(storageKey, JSON.stringify(overrides));\n    }\n  } catch {\n    // Ignore storage errors\n  }\n}\n\n// Event emitter for devtools communication\ntype Listener = () => void;\nconst listeners = new Set<Listener>();\nlet currentState: { flags: FeatureFlags; defaultFlags: FeatureFlags } | null = null;\n\nexport function subscribeToFlagChanges(listener: Listener): () => void {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n\nexport function getFlagState() {\n  return currentState;\n}\n\nfunction notifyListeners() {\n  listeners.forEach((listener) => listener());\n}\n\nexport function FeatureFlagProvider<T extends FeatureFlags>({\n  children,\n  defaultFlags,\n  storageKey = STORAGE_KEY_DEFAULT,\n  persistOverrides = true,\n}: FeatureFlagProviderProps<T>) {\n  const [overrides, setOverrides] = useState<Partial<T>>(() =>\n    persistOverrides ? getStoredOverrides<T>(storageKey) : {}\n  );\n\n  const flags = useMemo(\n    () => ({ ...defaultFlags, ...overrides }) as T,\n    [defaultFlags, overrides]\n  );\n\n  // Update global state for devtools\n  useEffect(() => {\n    currentState = { flags, defaultFlags };\n    notifyListeners();\n  }, [flags, defaultFlags]);\n\n  // Persist overrides to localStorage\n  useEffect(() => {\n    if (persistOverrides) {\n      setStoredOverrides(storageKey, overrides);\n    }\n  }, [overrides, storageKey, persistOverrides]);\n\n  const isEnabled = useCallback(\n    (flagName: keyof T): boolean => {\n      const value = flags[flagName];\n      return Boolean(value);\n    },\n    [flags]\n  );\n\n  const getValue = useCallback(\n    <K extends keyof T>(flagName: K): T[K] => {\n      return flags[flagName];\n    },\n    [flags]\n  );\n\n  const setFlag = useCallback(<K extends keyof T>(flagName: K, value: T[K]) => {\n    setOverrides((prev) => ({ ...prev, [flagName]: value }));\n  }, []);\n\n  const resetFlags = useCallback(() => {\n    setOverrides({});\n  }, []);\n\n  const value = useMemo<FeatureFlagContextValue<T>>(\n    () => ({\n      flags,\n      isEnabled,\n      getValue,\n      setFlag,\n      resetFlags,\n    }),\n    [flags, isEnabled, getValue, setFlag, resetFlags]\n  );\n\n  return (\n    <FeatureFlagContext.Provider value={value as unknown as FeatureFlagContextValue}>\n      {children}\n    </FeatureFlagContext.Provider>\n  );\n}\n\nexport function useFeatureFlagContext<\n  T extends FeatureFlags = FeatureFlags\n>(): FeatureFlagContextValue<T> {\n  const context = useContext(FeatureFlagContext);\n  if (!context) {\n    throw new Error(\n      \"useFeatureFlagContext must be used within a FeatureFlagProvider\"\n    );\n  }\n  return context as unknown as FeatureFlagContextValue<T>;\n}\n\n// Hook for devtools to subscribe to flag changes\nexport function useFlagState() {\n  return useSyncExternalStore(\n    subscribeToFlagChanges,\n    getFlagState,\n    () => null\n  );\n}\n","import { useMemo } from \"react\";\nimport { useFeatureFlagContext } from \"./context\";\nimport type { FeatureFlags } from \"./types\";\n\n/**\n * Hook to check if a feature flag is enabled (truthy)\n */\nexport function useFeatureFlag<T extends FeatureFlags = FeatureFlags>(\n  flagName: keyof T\n): boolean {\n  const { isEnabled } = useFeatureFlagContext<T>();\n  return isEnabled(flagName);\n}\n\n/**\n * Hook to get the raw value of a feature flag\n */\nexport function useFeatureFlagValue<\n  T extends FeatureFlags = FeatureFlags,\n  K extends keyof T = keyof T\n>(flagName: K): T[K] {\n  const { getValue } = useFeatureFlagContext<T>();\n  return getValue(flagName);\n}\n\n/**\n * Hook to get all feature flags\n */\nexport function useFeatureFlags<T extends FeatureFlags = FeatureFlags>(): T {\n  const { flags } = useFeatureFlagContext<T>();\n  return flags;\n}\n\n/**\n * Hook to get flag controls (setFlag, resetFlags)\n */\nexport function useFeatureFlagControls<T extends FeatureFlags = FeatureFlags>() {\n  const { setFlag, resetFlags } = useFeatureFlagContext<T>();\n  return useMemo(() => ({ setFlag, resetFlags }), [setFlag, resetFlags]);\n}\n\n/**\n * Component wrapper that renders children only if flag is enabled\n */\nexport function FeatureFlag<T extends FeatureFlags = FeatureFlags>({\n  flag,\n  children,\n  fallback = null,\n}: {\n  flag: keyof T;\n  children: React.ReactNode;\n  fallback?: React.ReactNode;\n}): React.ReactNode {\n  const enabled = useFeatureFlag<T>(flag);\n  return enabled ? children : fallback;\n}\n","import { useState } from \"react\";\nimport { useFlagState, useFeatureFlagContext } from \"./context\";\nimport type { FlagValue, FeatureFlags } from \"./types\";\n\ndeclare const __DEV__: boolean | undefined;\n\ninterface DevToolsProps {\n  position?: \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\";\n  defaultOpen?: boolean;\n}\n\nconst positionStyles: Record<string, React.CSSProperties> = {\n  \"bottom-right\": { bottom: 16, right: 16 },\n  \"bottom-left\": { bottom: 16, left: 16 },\n  \"top-right\": { top: 16, right: 16 },\n  \"top-left\": { top: 16, left: 16 },\n};\n\nconst baseStyles: React.CSSProperties = {\n  position: \"fixed\",\n  zIndex: 99999,\n  fontFamily:\n    'ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace',\n  fontSize: 13,\n};\n\nconst panelStyles: React.CSSProperties = {\n  backgroundColor: \"#1a1a2e\",\n  border: \"1px solid #2d2d44\",\n  borderRadius: 8,\n  boxShadow: \"0 8px 32px rgba(0, 0, 0, 0.4)\",\n  overflow: \"hidden\",\n  minWidth: 280,\n  maxWidth: 360,\n  maxHeight: \"70vh\",\n};\n\nconst headerStyles: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  padding: \"10px 12px\",\n  backgroundColor: \"#16162a\",\n  borderBottom: \"1px solid #2d2d44\",\n  cursor: \"pointer\",\n  userSelect: \"none\",\n};\n\nconst titleStyles: React.CSSProperties = {\n  color: \"#e0e0e0\",\n  fontWeight: 600,\n  fontSize: 12,\n  textTransform: \"uppercase\",\n  letterSpacing: \"0.5px\",\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 6,\n};\n\nconst contentStyles: React.CSSProperties = {\n  padding: 0,\n  overflowY: \"auto\",\n  maxHeight: \"calc(70vh - 50px)\",\n};\n\nconst flagRowStyles: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  padding: \"10px 12px\",\n  borderBottom: \"1px solid #2d2d44\",\n  transition: \"background-color 0.15s\",\n};\n\nconst flagNameStyles: React.CSSProperties = {\n  color: \"#c0c0c0\",\n  fontSize: 13,\n  fontWeight: 500,\n  flex: 1,\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n};\n\nconst toggleStyles: React.CSSProperties = {\n  position: \"relative\",\n  width: 40,\n  height: 22,\n  backgroundColor: \"#3d3d5c\",\n  borderRadius: 11,\n  cursor: \"pointer\",\n  transition: \"background-color 0.2s\",\n  flexShrink: 0,\n  border: \"none\",\n  padding: 0,\n};\n\nconst toggleActiveStyles: React.CSSProperties = {\n  ...toggleStyles,\n  backgroundColor: \"#4ade80\",\n};\n\nconst toggleKnobStyles: React.CSSProperties = {\n  position: \"absolute\",\n  top: 2,\n  left: 2,\n  width: 18,\n  height: 18,\n  backgroundColor: \"#fff\",\n  borderRadius: \"50%\",\n  transition: \"transform 0.2s\",\n  boxShadow: \"0 1px 3px rgba(0, 0, 0, 0.3)\",\n};\n\nconst toggleKnobActiveStyles: React.CSSProperties = {\n  ...toggleKnobStyles,\n  transform: \"translateX(18px)\",\n};\n\nconst inputStyles: React.CSSProperties = {\n  backgroundColor: \"#2d2d44\",\n  border: \"1px solid #3d3d5c\",\n  borderRadius: 4,\n  color: \"#e0e0e0\",\n  padding: \"4px 8px\",\n  fontSize: 12,\n  width: 80,\n  outline: \"none\",\n};\n\nconst badgeStyles: React.CSSProperties = {\n  backgroundColor: \"#4ade80\",\n  color: \"#1a1a2e\",\n  fontSize: 10,\n  fontWeight: 700,\n  padding: \"2px 6px\",\n  borderRadius: 4,\n  marginLeft: 6,\n};\n\nconst overrideBadgeStyles: React.CSSProperties = {\n  backgroundColor: \"#f59e0b\",\n  color: \"#1a1a2e\",\n  fontSize: 9,\n  fontWeight: 600,\n  padding: \"1px 4px\",\n  borderRadius: 3,\n  marginLeft: 6,\n};\n\nconst buttonStyles: React.CSSProperties = {\n  backgroundColor: \"transparent\",\n  border: \"none\",\n  color: \"#888\",\n  cursor: \"pointer\",\n  padding: 4,\n  borderRadius: 4,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  transition: \"color 0.15s, background-color 0.15s\",\n};\n\nconst resetButtonStyles: React.CSSProperties = {\n  backgroundColor: \"#2d2d44\",\n  border: \"1px solid #3d3d5c\",\n  borderRadius: 4,\n  color: \"#c0c0c0\",\n  padding: \"6px 12px\",\n  fontSize: 11,\n  cursor: \"pointer\",\n  margin: \"8px 12px 12px\",\n  width: \"calc(100% - 24px)\",\n  transition: \"background-color 0.15s\",\n};\n\nconst fabStyles: React.CSSProperties = {\n  width: 48,\n  height: 48,\n  borderRadius: \"50%\",\n  backgroundColor: \"#4ade80\",\n  border: \"none\",\n  cursor: \"pointer\",\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  boxShadow: \"0 4px 12px rgba(74, 222, 128, 0.4)\",\n  transition: \"transform 0.15s, box-shadow 0.15s\",\n};\n\nfunction FlagIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z\" />\n      <line x1=\"4\" y1=\"22\" x2=\"4\" y2=\"15\" />\n    </svg>\n  );\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\nfunction FlagRow({\n  name,\n  value,\n  defaultValue,\n  onToggle,\n  onChange,\n}: {\n  name: string;\n  value: FlagValue;\n  defaultValue: FlagValue;\n  onToggle: () => void;\n  onChange: (value: FlagValue) => void;\n}) {\n  const isOverridden = value !== defaultValue;\n  const isBoolean = typeof value === \"boolean\";\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    // Try to parse as number\n    const num = Number(newValue);\n    if (!isNaN(num) && newValue !== \"\") {\n      onChange(num);\n    } else {\n      onChange(newValue);\n    }\n  };\n\n  return (\n    <div style={flagRowStyles}>\n      <span style={flagNameStyles}>\n        {name}\n        {isOverridden && <span style={overrideBadgeStyles}>override</span>}\n      </span>\n      {isBoolean ? (\n        <button\n          style={value ? toggleActiveStyles : toggleStyles}\n          onClick={onToggle}\n          type=\"button\"\n          aria-label={`Toggle ${name}`}\n        >\n          <span style={value ? toggleKnobActiveStyles : toggleKnobStyles} />\n        </button>\n      ) : (\n        <input\n          style={inputStyles}\n          type=\"text\"\n          value={String(value)}\n          onChange={handleInputChange}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction DevToolsInner({\n  position,\n  defaultOpen,\n}: {\n  position: \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\";\n  defaultOpen: boolean;\n}) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const flagState = useFlagState();\n  const context = useFeatureFlagContext<FeatureFlags>();\n\n  if (!flagState) {\n    return null;\n  }\n\n  const { setFlag, resetFlags } = context;\n\n  const { flags, defaultFlags } = flagState;\n  const flagEntries = Object.entries(flags);\n  const overrideCount = flagEntries.filter(\n    ([key, value]) => value !== defaultFlags[key]\n  ).length;\n\n  const handleToggle = (key: string) => {\n    const currentValue = flags[key];\n    if (typeof currentValue === \"boolean\") {\n      setFlag(key, !currentValue);\n    }\n  };\n\n  const handleChange = (key: string, value: FlagValue) => {\n    setFlag(key, value);\n  };\n\n  if (!isOpen) {\n    return (\n      <div style={{ ...baseStyles, ...positionStyles[position] }}>\n        <button\n          style={fabStyles}\n          onClick={() => setIsOpen(true)}\n          type=\"button\"\n          aria-label=\"Open feature flags devtools\"\n        >\n          <span style={{ color: \"#1a1a2e\" }}>\n            <FlagIcon />\n          </span>\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ ...baseStyles, ...positionStyles[position] }}>\n      <div style={panelStyles}>\n        <div style={headerStyles} onClick={() => setIsOpen(false)}>\n          <span style={titleStyles}>\n            <FlagIcon />\n            Feature Flags\n            {overrideCount > 0 && (\n              <span style={badgeStyles}>{overrideCount}</span>\n            )}\n          </span>\n          <button style={buttonStyles} type=\"button\" aria-label=\"Close\">\n            <CloseIcon />\n          </button>\n        </div>\n        <div style={contentStyles}>\n          {flagEntries.map(([key, value]) => (\n            <FlagRow\n              key={key}\n              name={key}\n              value={value}\n              defaultValue={defaultFlags[key]}\n              onToggle={() => handleToggle(key)}\n              onChange={(newValue) => handleChange(key, newValue)}\n            />\n          ))}\n        </div>\n        {overrideCount > 0 && (\n          <button style={resetButtonStyles} onClick={resetFlags} type=\"button\">\n            Reset all overrides\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function DevTools({\n  position = \"bottom-right\",\n  defaultOpen = false,\n}: DevToolsProps) {\n  // Don't render in production - check via global __DEV__ or fallback to always showing\n  const isDev = typeof __DEV__ !== \"undefined\" ? __DEV__ : true;\n  if (!isDev) {\n    return null;\n  }\n\n  return <DevToolsInner position={position} defaultOpen={defaultOpen} />;\n}\n\nexport default DevTools;\n"],"mappings":"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","names":["value","useMemo","useMemo","useState","jsx","useState"]}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@localflag/react",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "check-types": "tsc --noEmit"
+  }
+}