@buoy-gg/shared-ui 1.7.2

package/lib/module/hooks/useDeviceInfo.js

@@ -0,0 +1,519 @@
+"use strict";
+
+/**
+ * Comprehensive device information hook
+ *
+ * Extracts every available piece of device information from React Native core APIs
+ * without requiring third-party native modules.
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { Platform, Dimensions, PixelRatio, AccessibilityInfo, Appearance, I18nManager, NativeModules, Keyboard, AppState, StatusBar } from "react-native";
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+async function getAccessibilitySettings() {
+  const [isScreenReaderEnabled, isReduceMotionEnabled, isReduceTransparencyEnabled] = await Promise.all([AccessibilityInfo.isScreenReaderEnabled(), AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isReduceTransparencyEnabled()]);
+  const settings = {
+    isScreenReaderEnabled,
+    isReduceMotionEnabled,
+    isReduceTransparencyEnabled
+  };
+  if (Platform.OS === "ios") {
+    const [isBoldTextEnabled, isGrayscaleEnabled, isInvertColorsEnabled, isDarkerSystemColorsEnabled, prefersCrossFadeTransitions] = await Promise.all([AccessibilityInfo.isBoldTextEnabled?.() ?? Promise.resolve(false), AccessibilityInfo.isGrayscaleEnabled?.() ?? Promise.resolve(false), AccessibilityInfo.isInvertColorsEnabled?.() ?? Promise.resolve(false),
+    // @ts-ignore - may not be typed
+    AccessibilityInfo.isDarkerSystemColorsEnabled?.() ?? Promise.resolve(false),
+    // @ts-ignore - may not be typed
+    AccessibilityInfo.prefersCrossFadeTransitions?.() ?? Promise.resolve(false)]);
+    settings.isBoldTextEnabled = isBoldTextEnabled;
+    settings.isGrayscaleEnabled = isGrayscaleEnabled;
+    settings.isInvertColorsEnabled = isInvertColorsEnabled;
+    settings.isDarkerSystemColorsEnabled = isDarkerSystemColorsEnabled;
+    settings.prefersCrossFadeTransitions = prefersCrossFadeTransitions;
+  }
+  if (Platform.OS === "android") {
+    // @ts-ignore - may not be typed
+    const isHighTextContrastEnabled = (await AccessibilityInfo.isHighTextContrastEnabled?.()) ?? false;
+    settings.isHighTextContrastEnabled = isHighTextContrastEnabled;
+  }
+  return settings;
+}
+function getPlatformInfo() {
+  const constants = Platform.constants;
+  const base = {
+    os: Platform.OS,
+    version: Platform.Version,
+    reactNativeVersion: constants.reactNativeVersion,
+    isTesting: Platform.isTesting ?? false,
+    isDisableAnimations: constants.isDisableAnimations ?? false
+  };
+  if (Platform.OS === "ios") {
+    return {
+      ...base,
+      osVersion: constants.osVersion,
+      systemName: constants.systemName,
+      interfaceIdiom: constants.interfaceIdiom,
+      isPad: Platform.isPad,
+      isTV: Platform.isTV,
+      isVision: Platform.isVision ?? false,
+      isMacCatalyst: Platform.isMacCatalyst ?? false,
+      forceTouchAvailable: constants.forceTouchAvailable
+    };
+  }
+  if (Platform.OS === "android") {
+    return {
+      ...base,
+      apiLevel: constants.Version,
+      release: constants.Release,
+      brand: constants.Brand,
+      manufacturer: constants.Manufacturer,
+      model: constants.Model,
+      fingerprint: constants.Fingerprint,
+      serial: constants.Serial,
+      uiMode: constants.uiMode
+    };
+  }
+  return base;
+}
+function getDisplayInfo() {
+  const window = Dimensions.get("window");
+  const screen = Dimensions.get("screen");
+  const info = {
+    window: {
+      width: window.width,
+      height: window.height,
+      scale: window.scale,
+      fontScale: window.fontScale
+    },
+    screen: {
+      width: screen.width,
+      height: screen.height,
+      scale: screen.scale,
+      fontScale: screen.fontScale
+    },
+    pixelRatio: PixelRatio.get(),
+    fontScale: PixelRatio.getFontScale(),
+    isLandscape: window.width > window.height,
+    isPortrait: window.height > window.width
+  };
+
+  // iOS specific
+  if (Platform.OS === "ios") {
+    try {
+      const deviceInfo = NativeModules.DeviceInfo?.getConstants?.();
+      info.isIPhoneNotched = deviceInfo?.isIPhoneX_deprecated ?? false;
+    } catch {
+      info.isIPhoneNotched = false;
+    }
+  }
+
+  // Android specific
+  if (Platform.OS === "android") {
+    try {
+      const deviceInfo = NativeModules.DeviceInfo?.getConstants?.();
+      info.isEdgeToEdge = deviceInfo?.isEdgeToEdge ?? false;
+      // densityDpi can be derived from scale: scale * 160
+      info.densityDpi = Math.round(window.scale * 160);
+    } catch {
+      // Ignore
+    }
+  }
+  return info;
+}
+async function getStatusBarHeight() {
+  return new Promise(resolve => {
+    let resolved = false;
+    if (Platform.OS === "ios") {
+      NativeModules.StatusBarManager?.getHeight?.(result => {
+        if (!resolved) {
+          resolved = true;
+          resolve(result?.height ?? null);
+        }
+      }) ?? resolve(null);
+    } else if (Platform.OS === "android") {
+      // Android StatusBar.currentHeight is synchronous
+      resolved = true;
+      resolve(StatusBar.currentHeight ?? null);
+    } else {
+      resolved = true;
+      resolve(null);
+    }
+
+    // Timeout fallback
+    setTimeout(() => {
+      if (!resolved) {
+        resolved = true;
+        resolve(null);
+      }
+    }, 100);
+  });
+}
+function getLocaleInfo() {
+  const info = {
+    isRTL: I18nManager.isRTL,
+    doLeftAndRightSwapInRTL: I18nManager.doLeftAndRightSwapInRTL
+  };
+  if (Platform.OS === "android") {
+    // @ts-ignore
+    info.localeIdentifier = I18nManager.localeIdentifier;
+  }
+  return info;
+}
+function getSettingsInfo() {
+  if (Platform.OS === "ios") {
+    try {
+      // This returns the entire NSUserDefaults dictionary
+      const constants = NativeModules.SettingsManager?.getConstants?.();
+      return {
+        userDefaults: constants?.settings ?? {}
+      };
+    } catch {
+      return {};
+    }
+  }
+  return {};
+}
+function getUniqueIdentifiers() {
+  const identifiers = {};
+  if (Platform.OS === "android") {
+    const constants = Platform.constants;
+    identifiers.serial = constants.Serial;
+    identifiers.fingerprint = constants.Fingerprint;
+
+    // Note: getAndroidID() requires calling native method
+    try {
+      const PlatformConstants = NativeModules.PlatformConstants;
+      if (PlatformConstants?.getAndroidID) {
+        identifiers.androidId = PlatformConstants.getAndroidID();
+      }
+    } catch {
+      // Ignore
+    }
+  }
+  return identifiers;
+}
+
+/**
+ * Generate a device fingerprint hash from stable properties
+ */
+function generateFingerprint(info) {
+  const components = [
+  // Platform
+  info.platform.os, info.platform.version,
+  // Display (most stable - identifies device model)
+  info.display.window.width, info.display.window.height, info.display.pixelRatio,
+  // iOS specific
+  info.platform.interfaceIdiom ?? "", info.platform.forceTouchAvailable ?? false, info.display.isIPhoneNotched ?? false,
+  // Android specific
+  info.platform.model ?? "", info.platform.brand ?? "", info.platform.manufacturer ?? "", info.platform.uiMode ?? ""];
+
+  // Simple hash function
+  const str = components.join("|");
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+  return Math.abs(hash).toString(16).padStart(8, "0");
+}
+
+// ============================================================================
+// THE HOOK
+// ============================================================================
+
+export function useDeviceInfo() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [platform, setPlatform] = useState(getPlatformInfo());
+  const [display, setDisplay] = useState(getDisplayInfo());
+  const [accessibility, setAccessibility] = useState({
+    isScreenReaderEnabled: false,
+    isReduceMotionEnabled: false,
+    isReduceTransparencyEnabled: false
+  });
+  const [appearance, setAppearance] = useState(() => {
+    const colorScheme = Appearance.getColorScheme() ?? null;
+    return {
+      colorScheme,
+      prefersDarkMode: colorScheme === "dark"
+    };
+  });
+  const [locale, setLocale] = useState(getLocaleInfo());
+  const [statusBar, setStatusBar] = useState({
+    height: null,
+    isVisible: true
+  });
+  const [keyboard, setKeyboard] = useState({
+    isVisible: false,
+    height: 0,
+    animationDuration: 0
+  });
+  const [appStateInfo, setAppStateInfo] = useState({
+    currentState: AppState.currentState,
+    isActive: AppState.currentState === "active"
+  });
+  const [identifiers, setIdentifiers] = useState(getUniqueIdentifiers());
+  const [settings, setSettings] = useState(getSettingsInfo());
+  const [timestamp, setTimestamp] = useState(Date.now());
+
+  // Refresh function
+  const refresh = useCallback(async () => {
+    setIsLoading(true);
+    const [accessibilitySettings, statusBarHeight] = await Promise.all([getAccessibilitySettings(), getStatusBarHeight()]);
+    setPlatform(getPlatformInfo());
+    setDisplay(getDisplayInfo());
+    setAccessibility(accessibilitySettings);
+    const currentColorScheme = Appearance.getColorScheme() ?? null;
+    setAppearance({
+      colorScheme: currentColorScheme,
+      prefersDarkMode: currentColorScheme === "dark"
+    });
+    setLocale(getLocaleInfo());
+    setStatusBar(prev => ({
+      ...prev,
+      height: statusBarHeight
+    }));
+    setIdentifiers(getUniqueIdentifiers());
+    setSettings(getSettingsInfo());
+    setTimestamp(Date.now());
+    setIsLoading(false);
+  }, []);
+
+  // Initial load
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  // Dimension changes
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener("change", ({
+      window,
+      screen
+    }) => {
+      setDisplay(prev => ({
+        ...prev,
+        window: {
+          width: window.width,
+          height: window.height,
+          scale: window.scale,
+          fontScale: window.fontScale
+        },
+        screen: {
+          width: screen.width,
+          height: screen.height,
+          scale: screen.scale,
+          fontScale: screen.fontScale
+        },
+        isLandscape: window.width > window.height,
+        isPortrait: window.height > window.width
+      }));
+    });
+    return () => subscription.remove();
+  }, []);
+
+  // Appearance changes
+  useEffect(() => {
+    const subscription = Appearance.addChangeListener(({
+      colorScheme
+    }) => {
+      const scheme = colorScheme ?? null;
+      setAppearance({
+        colorScheme: scheme,
+        prefersDarkMode: scheme === "dark"
+      });
+    });
+    return () => subscription.remove();
+  }, []);
+
+  // Keyboard changes
+  useEffect(() => {
+    const showListener = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow", event => {
+      setKeyboard({
+        isVisible: true,
+        height: event.endCoordinates.height,
+        animationDuration: event.duration ?? 0
+      });
+    });
+    const hideListener = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide", event => {
+      setKeyboard({
+        isVisible: false,
+        height: 0,
+        animationDuration: event.duration ?? 0
+      });
+    });
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+    };
+  }, []);
+
+  // App state changes
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", nextState => {
+      setAppStateInfo({
+        currentState: nextState,
+        isActive: nextState === "active"
+      });
+    });
+    return () => subscription.remove();
+  }, []);
+
+  // Accessibility changes
+  useEffect(() => {
+    const listeners = [AccessibilityInfo.addEventListener("screenReaderChanged", isEnabled => {
+      setAccessibility(prev => ({
+        ...prev,
+        isScreenReaderEnabled: isEnabled
+      }));
+    }), AccessibilityInfo.addEventListener("reduceMotionChanged", isEnabled => {
+      setAccessibility(prev => ({
+        ...prev,
+        isReduceMotionEnabled: isEnabled
+      }));
+    }), AccessibilityInfo.addEventListener("reduceTransparencyChanged", isEnabled => {
+      setAccessibility(prev => ({
+        ...prev,
+        isReduceTransparencyEnabled: isEnabled
+      }));
+    })];
+    if (Platform.OS === "ios") {
+      // iOS-specific accessibility events - using type assertion for non-standard events
+      const addIOSListener = (eventName, handler) => {
+        return AccessibilityInfo.addEventListener(eventName, handler);
+      };
+      listeners.push(addIOSListener("boldTextChanged", isEnabled => {
+        setAccessibility(prev => ({
+          ...prev,
+          isBoldTextEnabled: isEnabled
+        }));
+      }), addIOSListener("grayscaleChanged", isEnabled => {
+        setAccessibility(prev => ({
+          ...prev,
+          isGrayscaleEnabled: isEnabled
+        }));
+      }), addIOSListener("invertColorsChanged", isEnabled => {
+        setAccessibility(prev => ({
+          ...prev,
+          isInvertColorsEnabled: isEnabled
+        }));
+      }));
+    }
+    return () => {
+      listeners.forEach(listener => listener.remove());
+    };
+  }, []);
+  const deviceInfo = {
+    platform,
+    display,
+    accessibility,
+    appearance,
+    locale,
+    statusBar,
+    keyboard,
+    appState: appStateInfo,
+    identifiers,
+    settings,
+    timestamp,
+    isLoading,
+    refresh,
+    generateFingerprint: () => generateFingerprint({
+      platform,
+      display,
+      accessibility,
+      appearance,
+      locale,
+      statusBar,
+      keyboard,
+      appState: appStateInfo,
+      identifiers,
+      settings,
+      timestamp,
+      isLoading
+    })
+  };
+  return deviceInfo;
+}
+
+// ============================================================================
+// STATIC HELPER (for one-time retrieval without hooks)
+// ============================================================================
+
+export async function getDeviceInfo() {
+  const [accessibilitySettings, statusBarHeight] = await Promise.all([getAccessibilitySettings(), getStatusBarHeight()]);
+  const colorScheme = Appearance.getColorScheme() ?? null;
+  return {
+    platform: getPlatformInfo(),
+    display: getDisplayInfo(),
+    accessibility: accessibilitySettings,
+    appearance: {
+      colorScheme,
+      prefersDarkMode: colorScheme === "dark"
+    },
+    locale: getLocaleInfo(),
+    statusBar: {
+      height: statusBarHeight,
+      isVisible: true
+    },
+    keyboard: {
+      isVisible: false,
+      height: 0,
+      animationDuration: 0
+    },
+    appState: {
+      currentState: AppState.currentState,
+      isActive: AppState.currentState === "active"
+    },
+    identifiers: getUniqueIdentifiers(),
+    settings: getSettingsInfo(),
+    timestamp: Date.now(),
+    isLoading: false
+  };
+}
+
+// ============================================================================
+// DEBUG COMPONENT
+// ============================================================================
+
+/**
+ * Log all device info to console
+ * Use this to validate all device info is being collected correctly
+ */
+export function logDeviceInfo(info) {
+  console.log("\n========================================");
+  console.log("       DEVICE INFO REPORT");
+  console.log("========================================\n");
+  console.log("--- PLATFORM ---");
+  console.log(JSON.stringify(info.platform, null, 2));
+  console.log("\n--- DISPLAY ---");
+  console.log(JSON.stringify(info.display, null, 2));
+  console.log("\n--- ACCESSIBILITY ---");
+  console.log(JSON.stringify(info.accessibility, null, 2));
+  console.log("\n--- APPEARANCE ---");
+  console.log(JSON.stringify(info.appearance, null, 2));
+  console.log("\n--- LOCALE ---");
+  console.log(JSON.stringify(info.locale, null, 2));
+  console.log("\n--- STATUS BAR ---");
+  console.log(JSON.stringify(info.statusBar, null, 2));
+  console.log("\n--- KEYBOARD ---");
+  console.log(JSON.stringify(info.keyboard, null, 2));
+  console.log("\n--- APP STATE ---");
+  console.log(JSON.stringify(info.appState, null, 2));
+  console.log("\n--- IDENTIFIERS ---");
+  console.log(JSON.stringify(info.identifiers, null, 2));
+  console.log("\n--- SETTINGS ---");
+  const settingsKeys = Object.keys(info.settings.userDefaults ?? {});
+  console.log(`userDefaults: ${settingsKeys.length} keys`);
+  if (settingsKeys.length > 0 && settingsKeys.length <= 20) {
+    console.log(JSON.stringify(info.settings, null, 2));
+  }
+  console.log("\n--- METADATA ---");
+  console.log(`timestamp: ${info.timestamp}`);
+  console.log(`isLoading: ${info.isLoading}`);
+  console.log("\n========================================\n");
+}

package/lib/module/hooks/useFilterManager.js

@@ -0,0 +1,132 @@
+"use strict";
+
+import { useState, useCallback } from "react";
+/**
+ * Custom hook for managing filter state and operations
+ * 
+ * This hook provides a complete interface for managing a set of string filters
+ * with add, remove, toggle, and clear operations. It also manages UI state
+ * for adding new filters through an input field.
+ * 
+ * @param initialFilters - Initial set of filters to start with
+ * @returns Object containing filter state and management functions
+ * 
+ * @example
+ * ```typescript
+ * function FilterComponent() {
+ *   const {
+ *     filters,
+ *     showAddInput,
+ *     newFilter,
+ *     addFilter,
+ *     removeFilter,
+ *     toggleFilter,
+ *     clearFilters,
+ *     setNewFilter,
+ *     setShowAddInput,
+ *     hasFilter
+ *   } = useFilterManager(new Set(['initial-filter']));
+ * 
+ *   return (
+ *     <div>
+ *       {Array.from(filters).map(filter => (
+ *         <FilterTag key={filter} onRemove={() => removeFilter(filter)}>
+ *           {filter}
+ *         </FilterTag>
+ *       ))}
+ *       <button onClick={() => addFilter('new-filter')}>Add Filter</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ * 
+ * @performance Uses Set for O(1) filter lookups and efficient deduplication
+ * @performance All operations are memoized with useCallback for stable references
+ */
+export function useFilterManager(initialFilters = new Set()) {
+  const [filters, setFilters] = useState(initialFilters);
+  const [showAddInput, setShowAddInput] = useState(false);
+  const [newFilter, setNewFilter] = useState("");
+
+  /**
+   * Add a new filter to the set
+   * 
+   * Trims whitespace and only adds non-empty strings. Automatically
+   * clears the new filter input and hides the add input UI.
+   * 
+   * @param filter - The filter string to add
+   */
+  const addFilter = useCallback(filter => {
+    const trimmedFilter = filter.trim();
+    if (trimmedFilter) {
+      setFilters(prev => new Set([...prev, trimmedFilter]));
+      setNewFilter("");
+      setShowAddInput(false);
+    }
+  }, []);
+
+  /**
+   * Remove a filter from the set
+   * 
+   * @param filter - The filter string to remove
+   */
+  const removeFilter = useCallback(filter => {
+    setFilters(prev => {
+      const next = new Set(prev);
+      next.delete(filter);
+      return next;
+    });
+  }, []);
+
+  /**
+   * Toggle a filter in the set (add if not present, remove if present)
+   * 
+   * @param filter - The filter string to toggle
+   */
+  const toggleFilter = useCallback(filter => {
+    setFilters(prev => {
+      const next = new Set(prev);
+      if (next.has(filter)) {
+        next.delete(filter);
+      } else {
+        next.add(filter);
+      }
+      return next;
+    });
+  }, []);
+
+  /**
+   * Clear all filters and reset UI state
+   * 
+   * Removes all filters from the set and resets the input UI state.
+   */
+  const clearFilters = useCallback(() => {
+    setFilters(new Set());
+    setNewFilter("");
+    setShowAddInput(false);
+  }, []);
+
+  /**
+   * Check if a filter exists in the set
+   * 
+   * @param filter - The filter string to check
+   * @returns True if the filter exists in the set
+   */
+  const hasFilter = useCallback(filter => {
+    return filters.has(filter);
+  }, [filters]);
+  return {
+    // State
+    filters,
+    showAddInput,
+    newFilter,
+    // Actions
+    setNewFilter,
+    setShowAddInput,
+    addFilter,
+    removeFilter,
+    toggleFilter,
+    clearFilters,
+    hasFilter
+  };
+}