@djangocfg/ui-nextjs 2.1.9 → 2.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.9",
-    "@djangocfg/ui-core": "^2.1.9",
+    "@djangocfg/api": "^2.1.10",
+    "@djangocfg/ui-core": "^2.1.10",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -92,6 +92,7 @@
     "next-themes": "^0.4.6",
     "prism-react-renderer": "^2.4.1",
     "react-chartjs-2": "^5.3.0",
+    "react-device-detect": "^2.2.3",
     "react-hotkeys-hook": "^5.2.1",
     "react-json-tree": "^0.20.0",
     "react-lottie-player": "^2.1.0",
@@ -103,7 +104,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.9",
+    "@djangocfg/typescript-config": "^2.1.10",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/hooks/index.ts

@@ -22,3 +22,7 @@ export { useCfgRouter } from './useCfgRouter';
 // Keyboard shortcuts
 export { useHotkey, useHotkeysContext, HotkeysProvider, isHotkeyPressed } from './useHotkey';
 export type { UseHotkeyOptions, HotkeyCallback, Keys } from './useHotkey';
+
+// Device detection
+export { useDeviceDetect } from './useDeviceDetect';
+export type { DeviceDetectResult } from './useDeviceDetect';

package/src/hooks/useDeviceDetect.ts

@@ -0,0 +1,270 @@
+'use client';
+
+import { useMemo, useState, useEffect } from 'react';
+
+// Safe defaults for SSR
+const defaultSelectors = {
+  isMobile: false,
+  isTablet: false,
+  isDesktop: false,
+  isBrowser: false,
+  isMobileOnly: false,
+  isSmartTV: false,
+  isConsole: false,
+  isWearable: false,
+  isEmbedded: false,
+  isAndroid: false,
+  isIOS: false,
+  isWindows: false,
+  isMacOs: false,
+  isWinPhone: false,
+  isChrome: false,
+  isFirefox: false,
+  isSafari: false,
+  isOpera: false,
+  isIE: false,
+  isEdge: false,
+  isEdgeChromium: false,
+  isLegacyEdge: false,
+  isChromium: false,
+  isMobileSafari: false,
+  isYandex: false,
+  isMIUI: false,
+  isSamsungBrowser: false,
+  isElectron: false,
+  osVersion: 'unknown',
+  osName: 'unknown',
+  fullBrowserVersion: 'unknown',
+  browserVersion: 'unknown',
+  browserName: 'unknown',
+  mobileVendor: 'unknown',
+  mobileModel: 'unknown',
+  engineName: 'unknown',
+  engineVersion: 'unknown',
+  getUA: '',
+  deviceType: 'unknown',
+  isIOS13: false,
+  isIPad13: false,
+  isIPhone13: false,
+  isIPod13: false,
+};
+
+const defaultDeviceData = {
+  deviceType: 'unknown',
+  osName: 'unknown',
+  osVersion: 'unknown',
+  browserName: 'unknown',
+  browserVersion: 'unknown',
+  fullBrowserVersion: 'unknown',
+  mobileVendor: 'unknown',
+  mobileModel: 'unknown',
+  engineName: 'unknown',
+  engineVersion: 'unknown',
+  getUA: '',
+};
+
+const defaultOrientation = {
+  isPortrait: false,
+  isLandscape: false,
+  orientation: 'portrait' as 'portrait' | 'landscape',
+};
+
+/**
+ * Device detection hook wrapper for react-device-detect
+ * 
+ * Provides a convenient interface to access device information including:
+ * - Device type (mobile, tablet, desktop, etc.)
+ * - Browser information (name, version, etc.)
+ * - OS information (name, version, etc.)
+ * - Orientation (portrait/landscape)
+ * 
+ * @param userAgent - Optional user agent string (useful for SSR)
+ * @returns Device detection object with all available information
+ * 
+ * @example
+ * ```tsx
+ * const device = useDeviceDetect();
+ * 
+ * if (device.isMobile) {
+ *   return <MobileView />;
+ * }
+ * 
+ * return <DesktopView />;
+ * ```
+ */
+export function useDeviceDetect(userAgent?: string) {
+  const [deviceInfo, setDeviceInfo] = useState<{
+    selectors: typeof defaultSelectors;
+    deviceData: typeof defaultDeviceData;
+    orientation: {
+      isPortrait: boolean;
+      isLandscape: boolean;
+      orientation: 'portrait' | 'landscape';
+    };
+  }>({
+    selectors: defaultSelectors,
+    deviceData: defaultDeviceData,
+    orientation: defaultOrientation,
+  });
+
+  useEffect(() => {
+    // Only run on client side
+    if (typeof window === 'undefined') return;
+
+    // Dynamic import to avoid SSR issues
+    import('react-device-detect').then((deviceDetect) => {
+      // Get user agent string
+      const ua = userAgent || (typeof window !== 'undefined' ? window.navigator.userAgent : '');
+      
+      if (!ua) {
+        console.warn('No user agent available');
+        return;
+      }
+
+      // Parse user agent using library's parseUserAgent function
+      const parsed = deviceDetect.parseUserAgent(ua);
+      
+      if (!parsed) {
+        console.warn('Failed to parse user agent');
+        return;
+      }
+
+      // Build selectors using library's buildSelectorsObject
+      // We need to import buildSelectorsObject, but it's not exported
+      // So we'll use getSelectorsByUserAgent which is exported
+      const selectors = deviceDetect.getSelectorsByUserAgent(ua) || defaultSelectors;
+      
+      // Extract device data from parsed result
+      const deviceData = {
+        deviceType: parsed.device?.type || 'unknown',
+        osName: parsed.os?.name || 'unknown',
+        osVersion: parsed.os?.version || 'unknown',
+        browserName: parsed.browser?.name || 'unknown',
+        browserVersion: parsed.browser?.version || 'unknown',
+        fullBrowserVersion: parsed.browser?.version || 'unknown',
+        mobileVendor: parsed.device?.vendor || 'unknown',
+        mobileModel: parsed.device?.model || 'unknown',
+        engineName: parsed.engine?.name || 'unknown',
+        engineVersion: parsed.engine?.version || 'unknown',
+        getUA: parsed.ua || ua,
+      };
+
+      // Get orientation - use library's hook if available, otherwise calculate
+      let orientation = defaultOrientation;
+      
+      try {
+        // Try to use the hook, but we can't call hooks conditionally
+        // So we'll calculate orientation manually
+        if (typeof window !== 'undefined') {
+          const isPortrait = window.innerHeight > window.innerWidth;
+          orientation = {
+            isPortrait,
+            isLandscape: !isPortrait,
+            orientation: (isPortrait ? 'portrait' : 'landscape') as 'portrait' | 'landscape',
+          };
+        }
+      } catch (error) {
+        console.warn('Failed to get orientation:', error);
+      }
+      
+      setDeviceInfo({ selectors, deviceData, orientation });
+    }).catch((error) => {
+      console.warn('Failed to load device detection:', error);
+    });
+  }, [userAgent]);
+
+  // Update orientation on window resize
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleResize = () => {
+      const isPortrait = window.innerHeight > window.innerWidth;
+      setDeviceInfo((prev) => ({
+        ...prev,
+        orientation: {
+          isPortrait,
+          isLandscape: !isPortrait,
+          orientation: (isPortrait ? 'portrait' : 'landscape') as 'portrait' | 'landscape',
+        },
+      }));
+    };
+
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('orientationchange', handleResize);
+    
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('orientationchange', handleResize);
+    };
+  }, []);
+
+  const { selectors, deviceData, orientation } = deviceInfo;
+
+  return useMemo(() => {
+    return {
+      // Device type selectors
+      isMobile: selectors.isMobile ?? false,
+      isTablet: selectors.isTablet ?? false,
+      isDesktop: selectors.isDesktop ?? false,
+      isBrowser: selectors.isBrowser ?? false,
+      isMobileOnly: selectors.isMobileOnly ?? false,
+      isSmartTV: selectors.isSmartTV ?? false,
+      isConsole: selectors.isConsole ?? false,
+      isWearable: selectors.isWearable ?? false,
+      isEmbedded: selectors.isEmbedded ?? false,
+
+      // OS selectors
+      isAndroid: selectors.isAndroid ?? false,
+      isIOS: selectors.isIOS ?? false,
+      isWindows: selectors.isWindows ?? false,
+      isMacOs: selectors.isMacOs ?? false,
+      isWinPhone: selectors.isWinPhone ?? false,
+
+      // Browser selectors
+      isChrome: selectors.isChrome ?? false,
+      isFirefox: selectors.isFirefox ?? false,
+      isSafari: selectors.isSafari ?? false,
+      isOpera: selectors.isOpera ?? false,
+      isIE: selectors.isIE ?? false,
+      isEdge: selectors.isEdge ?? false,
+      isEdgeChromium: selectors.isEdgeChromium ?? false,
+      isLegacyEdge: selectors.isLegacyEdge ?? false,
+      isChromium: selectors.isChromium ?? false,
+      isMobileSafari: selectors.isMobileSafari ?? false,
+      isYandex: selectors.isYandex ?? false,
+      isMIUI: selectors.isMIUI ?? false,
+      isSamsungBrowser: selectors.isSamsungBrowser ?? false,
+      isElectron: selectors.isElectron ?? false,
+
+      // iOS version selectors
+      isIOS13: selectors.isIOS13 ?? false,
+      isIPad13: selectors.isIPad13 ?? false,
+      isIPhone13: selectors.isIPhone13 ?? false,
+      isIPod13: selectors.isIPod13 ?? false,
+
+      // Device information
+      deviceType: deviceData.deviceType ?? 'unknown',
+      osName: deviceData.osName ?? 'unknown',
+      osVersion: deviceData.osVersion ?? 'unknown',
+      browserName: deviceData.browserName ?? 'unknown',
+      browserVersion: deviceData.browserVersion ?? 'unknown',
+      fullBrowserVersion: deviceData.fullBrowserVersion ?? 'unknown',
+      mobileVendor: deviceData.mobileVendor ?? 'unknown',
+      mobileModel: deviceData.mobileModel ?? 'unknown',
+      engineName: deviceData.engineName ?? 'unknown',
+      engineVersion: deviceData.engineVersion ?? 'unknown',
+      getUA: deviceData.getUA ?? '',
+
+      // Orientation
+      isPortrait: orientation.isPortrait,
+      isLandscape: orientation.isLandscape,
+      orientation: orientation.orientation,
+
+      // Raw data (for advanced usage)
+      selectors,
+      deviceData,
+    };
+  }, [selectors, deviceData, orientation]);
+}
+
+export type DeviceDetectResult = ReturnType<typeof useDeviceDetect>;