novalon-website/e2e/src/utils/devices.ts

import { DeviceConfig } from '../types';

export const devices: Record<string, DeviceConfig> = {
  'desktop-1920x1080': {
    name: 'Desktop 1920x1080',
    viewport: { width: 1920, height: 1080 },
    isMobile: false,
  },
  'desktop-1366x768': {
    name: 'Desktop 1366x768',
    viewport: { width: 1366, height: 768 },
    isMobile: false,
  },
  'desktop-1280x720': {
    name: 'Desktop 1280x720',
    viewport: { width: 1280, height: 720 },
    isMobile: false,
  },
  'laptop-1440x900': {
    name: 'Laptop 1440x900',
    viewport: { width: 1440, height: 900 },
    isMobile: false,
  },
  'laptop-1024x768': {
    name: 'Laptop 1024x768',
    viewport: { width: 1024, height: 768 },
    isMobile: false,
  },
  'tablet-768x1024': {
    name: 'Tablet 768x1024',
    viewport: { width: 768, height: 1024 },
    isMobile: true,
  },
  'tablet-834x1194': {
    name: 'Tablet 834x1194 (iPad Pro)',
    viewport: { width: 834, height: 1194 },
    isMobile: true,
  },
  'mobile-375x667': {
    name: 'Mobile 375x667 (iPhone SE)',
    viewport: { width: 375, height: 667 },
    isMobile: true,
  },
  'mobile-390x844': {
    name: 'Mobile 390x844 (iPhone 12)',
    viewport: { width: 390, height: 844 },
    isMobile: true,
  },
  'mobile-414x896': {
    name: 'Mobile 414x896 (iPhone 11)',
    viewport: { width: 414, height: 896 },
    isMobile: true,
  },
  'mobile-360x640': {
    name: 'Mobile 360x640 (Android)',
    viewport: { width: 360, height: 640 },
    isMobile: true,
  },
  'mobile-412x915': {
    name: 'Mobile 412x915 (Pixel 5)',
    viewport: { width: 412, height: 915 },
    isMobile: true,
  },
  'iphone-13-pro': {
    name: 'iPhone 13 Pro',
    viewport: { width: 390, height: 844 },
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1',
    isMobile: true,
    deviceScaleFactor: 3,
  },
  'iphone-14-pro': {
    name: 'iPhone 14 Pro',
    viewport: { width: 393, height: 852 },
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1',
    isMobile: true,
    deviceScaleFactor: 3,
  },
  'iphone-15-pro': {
    name: 'iPhone 15 Pro',
    viewport: { width: 393, height: 852 },
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
    isMobile: true,
    deviceScaleFactor: 3,
  },
  'pixel-7': {
    name: 'Google Pixel 7',
    viewport: { width: 412, height: 915 },
    userAgent: 'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36',
    isMobile: true,
    deviceScaleFactor: 2.625,
  },
  'samsung-galaxy-s23': {
    name: 'Samsung Galaxy S23',
    viewport: { width: 360, height: 780 },
    userAgent: 'Mozilla/5.0 (Linux; Android 13; SM-S911B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36',
    isMobile: true,
    deviceScaleFactor: 3,
  },
  'ipad-air': {
    name: 'iPad Air',
    viewport: { width: 820, height: 1180 },
    userAgent: 'Mozilla/5.0 (iPad; CPU OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1',
    isMobile: true,
    deviceScaleFactor: 2,
  },
  'ipad-pro-12-9': {
    name: 'iPad Pro 12.9"',
    viewport: { width: 1024, height: 1366 },
    userAgent: 'Mozilla/5.0 (iPad; CPU OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1',
    isMobile: true,
    deviceScaleFactor: 2,
  },
};

export const desktopDevices = Object.entries(devices)
  .filter(([_, config]) => !config.isMobile)
  .map(([key, config]) => ({ key, ...config }));

export const mobileDevices = Object.entries(devices)
  .filter(([_, config]) => config.isMobile)
  .map(([key, config]) => ({ key, ...config }));

export const tabletDevices = Object.entries(devices)
  .filter(([_, config]) => config.isMobile && config.viewport.width >= 768)
  .map(([key, config]) => ({ key, ...config }));

export const getDevice = (key: string): DeviceConfig => {
  const device = devices[key];
  if (!device) {
    return devices['desktop-1280x720']!;
  }
  return device;
};

export const getAllDevices = (): DeviceConfig[] => {
  return Object.values(devices);
};

export const getDesktopDevices = (): DeviceConfig[] => {
  return desktopDevices.map(d => devices[d.key]!);
};

export const getMobileDevices = (): DeviceConfig[] => {
  return mobileDevices.map(d => devices[d.key]!);
};

export const getTabletDevices = (): DeviceConfig[] => {
  return tabletDevices.map(d => devices[d.key]!);
};

export const getBreakpoints = () => {
  return {
    xs: 0,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    '2xl': 1536,
  };
};

export const isMobile = (width: number): boolean => {
  const breakpoints = getBreakpoints();
  return width < breakpoints.lg;
};

export const isTablet = (width: number): boolean => {
  const breakpoints = getBreakpoints();
  return width >= breakpoints.md && width < breakpoints.lg;
};

export const isDesktop = (width: number): boolean => {
  const breakpoints = getBreakpoints();
  return width >= breakpoints.lg;
};