feat(core): implement function for detecting device

.gitignore

@@ -27,3 +27,9 @@ coverage
 .env
 
 .DS_Store
+
+# claude
+.claude
+CLAUDE.md
+
+docs/

.nvmrc

@@ -1,5 +1 @@
-lts/iron
-
-# 'iron' is the 20.x node release line
-# ESLint requires Node.js >=18.18.0, >=20.9.0, or >=21.1.0 — ensure 20.9.0+ if using iron
-# See: https://eslint.org/docs/latest/use/getting-started#prerequisites
+v22.18.0

.yarnrc.yml

@@ -3,6 +3,8 @@ changesetBaseRefs:
 
 enableGlobalCache: false
 
+nodeLinker: pnp
+
 npmScopes:
   jsr:
     npmRegistryServer: 'https://npm.jsr.io'

package.json

@@ -4,6 +4,9 @@
   "main": "./src/index.ts",
   "type": "module",
   "sideEffects": false,
+  "workspaces": [
+    "packages/*"
+  ],
   "keywords": [
     "react"
   ],
@@ -20,6 +23,7 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist ./esm ./coverage ./node_modules",
+    "clean:all": "yarn clean && yarn workspace @react-simplikit/mobile clean",
     "scaffold": "tsx .scripts/index.ts scaffold",
     "changeset": "changeset",
     "changeset:version": "changeset version",
@@ -37,6 +41,10 @@
     "test:type": "tsc --noEmit",
     "test:spec": "vitest run",
     "test:coverage": "vitest run --coverage",
+    "test:mobile": "yarn workspace @react-simplikit/mobile test",
+    "build": "tsup",
+    "build:mobile": "yarn workspace @react-simplikit/mobile build",
+    "build:all": "yarn build && yarn build:mobile",
     "prepack": "tsup"
   },
   "publishConfig": {

packages/mobile/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@react-simplikit/mobile",
+  "version": "0.1.0",
+  "description": "Mobile web utilities for React - fixing viewport, keyboard, and layout issues",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "mobile",
+    "viewport",
+    "keyboard",
+    "mobile-web",
+    "ios-safari",
+    "android-chrome",
+    "visual-viewport",
+    "keyboard-avoiding",
+    "safe-area"
+  ],
+  "homepage": "https://react-simplikit.slash.page",
+  "bugs": "https://github.com/toss/react-simplikit/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toss/react-simplikit.git",
+    "directory": "packages/mobile"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf ./dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/mobile/src/utils/device/device.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+
+import { isAndroid, isIOS } from './device.ts';
+
+describe('device utils', () => {
+  it('should detect iOS', () => {
+    expect(isIOS('Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X)')).toBe(true);
+  });
+
+  it('should detect iPadOS (MacIntel + touch)', () => {
+    Object.defineProperty(navigator, 'platform', {
+      value: 'MacIntel',
+      configurable: true,
+    });
+    Object.defineProperty(navigator, 'maxTouchPoints', {
+      value: 5,
+      configurable: true,
+    });
+
+    expect(isIOS('Mozilla/5.0 (Macintosh; Intel Mac OS X)')).toBe(true);
+  });
+});
+
+it('should detect Android', () => {
+  expect(isAndroid('Mozilla/5.0 (Linux; Android 12; Pixel 6) Chrome/120')).toBe(true);
+});

packages/mobile/src/utils/device/device.ts

@@ -0,0 +1,28 @@
+/**
+ * Detects whether the current device is running iOS or iPadOS.
+ *
+ * Notes on platform inconsistencies:
+ * - Prior to iPadOS 13, iPads reported their platform as "iPad" (or matched /iPad/ in UA).
+ * - Starting from iPadOS 13, Apple changed the platform string to "MacIntel"
+ *   to make websites treat iPadOS as desktop-class Safari.
+ *   However, these devices still expose multi-touch capabilities.
+ */
+export function isIOS(userAgent: string = navigator.userAgent): boolean {
+  const platform = navigator.platform;
+  const maxTouchPoints = navigator.maxTouchPoints;
+
+  const matchesClassicIOS = /iPhone|iPad|iPod/i.test(userAgent);
+  const matchesModernIPad = platform === 'MacIntel' && typeof maxTouchPoints === 'number' && maxTouchPoints > 1;
+
+  return matchesClassicIOS || matchesModernIPad;
+}
+
+/**
+ * Detects whether the current device is running Android.
+ *
+ * Notes:
+ * - All Android browsers include the token "Android" in the user agent.
+ */
+export function isAndroid(userAgent: string = navigator.userAgent): boolean {
+  return /Android/i.test(userAgent);
+}

packages/mobile/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@react-simplikit/mobile": ["./src/index.ts"]
+    }
+  },
+  "include": ["src/**/*", "utils/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

packages/mobile/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs'],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  splitting: false,
+  // To support React Server Components
+  banner: {
+    js: '"use client";',
+  },
+});

packages/mobile/vitest.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    globals: true,
+    sequence: {
+      concurrent: false,
+    },
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json'],
+      extension: ['.ts', '.tsx'],
+      include: ['src/**/*.ts?(x)'],
+      exclude: ['src/**/index.ts', 'src/**/*.spec.ts?(x)'],
+    },
+  },
+});

packages/mobile/vitest.setup.ts

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+import { TextEncoder } from 'util';
+global.TextEncoder = TextEncoder;
+
+// Cleanup after each test for @testing-library/react
+afterEach(() => {
+  cleanup();
+});

tsconfig.json

@@ -13,7 +13,7 @@
     "jsx": "react-jsx",
     "types": ["@testing-library/jest-dom"]
   },
-  "include": ["src", ".scripts/**/*"],
+  "include": ["src", "packages/**/src", ".scripts/**/*"],
   "vueCompilerOptions": {
     "vitePressExtensions": [".md"]
   }