@empline/preflight 1.1.11 → 1.1.13

package/dist/checks/consolidated/ui-mobile-ux.d.ts

@@ -0,0 +1,251 @@
+#!/usr/bin/env tsx
+/**
+ * UI Mobile UX Preflight (NON-BLOCKING)
+ *
+ * Comprehensive mobile user experience validation.
+ * Ensures the app provides a great experience on mobile devices.
+ *
+ * Checks:
+ * 1. Safe Area Insets - env(safe-area-inset-*) for notched devices
+ * 2. Input Types - Proper HTML input types for mobile keyboards
+ * 3. Font Size Minimum - 16px minimum to prevent iOS auto-zoom
+ * 4. Horizontal Overflow - Elements wider than viewport
+ * 5. Viewport Units - 100vh issues, prefer dvh/svh
+ * 6. Hover Media Query - @media (hover: hover) for hover-only styles
+ * 7. Bottom Navigation - Mobile nav patterns
+ * 8. Sticky Position - iOS Safari quirks
+ * 9. Orientation Support - Landscape handling
+ * 10. Form Labels - Visible labels, not just placeholders
+ * 11. Mobile Menu Focus - Focus management in mobile menus
+ * 12. Tap Delay - touch-action: manipulation
+ *
+ * Usage:
+ *   pnpm preflight:ui-mobile-ux              # All checks
+ *   pnpm preflight:ui-mobile-ux safearea     # Safe area only
+ *   pnpm preflight:ui-mobile-ux inputs       # Input types only
+ *   pnpm preflight:ui-mobile-ux fonts        # Font size only
+ *   pnpm preflight:ui-mobile-ux overflow     # Horizontal overflow only
+ *   pnpm preflight:ui-mobile-ux viewport     # Viewport units only
+ *   pnpm preflight:ui-mobile-ux hover        # Hover media query only
+ */
+interface Issue {
+    file: string;
+    line: number;
+    type: string;
+    severity: "error" | "warning" | "info";
+    message: string;
+    suggestion: string;
+    snippet?: string;
+}
+interface CheckResult {
+    name: string;
+    passed: boolean;
+    blocking: boolean;
+    issues: Issue[];
+    duration: number;
+}
+interface ModuleResult {
+    module: string;
+    passed: boolean;
+    totalDuration: number;
+    checks: CheckResult[];
+    summary: {
+        total: number;
+        passed: number;
+        failed: number;
+        errors: number;
+        warnings: number;
+    };
+}
+declare class UIMobileUXModule {
+    private verbose;
+    constructor(options?: {
+        verbose?: boolean;
+    });
+    private getTsxFiles;
+    private getCssFiles;
+    /**
+     * Check if line should be skipped due to preflight-ignore comment
+     */
+    private shouldSkipLine;
+    /**
+     * 1. Safe Area Insets
+     * Check for proper safe-area-inset usage for notched devices
+     */
+    checkSafeAreaInsets(): Promise<CheckResult>;
+    /**
+     * 2. Input Types for Mobile Keyboards
+     * Check that inputs use appropriate types for mobile keyboards
+     */
+    checkInputTypes(): Promise<CheckResult>;
+    /**
+     * 3. Font Size Minimum (iOS Auto-Zoom Prevention)
+     * Check that input font sizes are at least 16px to prevent iOS zoom
+     */
+    checkFontSizeMinimum(): Promise<CheckResult>;
+    /**
+     * 4. Horizontal Overflow Prevention
+     * Check for elements that might cause horizontal scroll on mobile
+     */
+    checkHorizontalOverflow(): Promise<CheckResult>;
+    /**
+     * 5. Viewport Units (100vh issues)
+     * Check for 100vh usage which is problematic on mobile browsers
+     */
+    checkViewportUnits(): Promise<CheckResult>;
+    /**
+     * 6. Hover Media Query
+     * Check that hover styles use @media (hover: hover) for touch devices
+     */
+    checkHoverMediaQuery(): Promise<CheckResult>;
+    /**
+     * 7. Form Labels (Not Just Placeholders)
+     * Check that form inputs have visible labels, not just placeholders
+     */
+    checkFormLabels(): Promise<CheckResult>;
+    /**
+     * 8. Sticky Position Mobile Issues
+     * Check for sticky positioning that may have iOS Safari issues
+     */
+    checkStickyPosition(): Promise<CheckResult>;
+    /**
+     * 9. Orientation Support
+     * Check for landscape orientation handling
+     */
+    checkOrientationSupport(): Promise<CheckResult>;
+    /**
+     * 10. Touch Action Optimization
+     * Check for touch-action: manipulation for better touch performance
+     */
+    checkTouchAction(): Promise<CheckResult>;
+    /**
+     * 11. Mobile Menu Focus Management
+     * Check that mobile menus trap focus properly
+     */
+    checkMobileMenuFocus(): Promise<CheckResult>;
+    /**
+     * 12. Bottom Navigation Pattern
+     * Check for proper mobile bottom navigation patterns
+     */
+    checkBottomNavigation(): Promise<CheckResult>;
+    /**
+     * 13. Pull-to-Refresh Detection
+     * Check if scrollable lists implement pull-to-refresh patterns
+     */
+    checkPullToRefresh(): Promise<CheckResult>;
+    /**
+     * 14. Mobile Table Patterns
+     * Check that tables are responsive on mobile (scrollable or card-based)
+     */
+    checkMobileTablePatterns(): Promise<CheckResult>;
+    /**
+     * 15. Mobile Modal Sizing
+     * Check that modals are appropriately sized on mobile
+     */
+    checkMobileModalSizing(): Promise<CheckResult>;
+    /**
+     * 16. iOS Rubber Banding (overscroll-behavior)
+     * Check for proper overscroll handling on iOS
+     */
+    checkOverscrollBehavior(): Promise<CheckResult>;
+    /**
+     * 17. PWA Meta Tags
+     * Check for Progressive Web App meta tag support
+     */
+    checkPWAMetaTags(): Promise<CheckResult>;
+    /**
+     * 18. Mobile Autofill Styling
+     * Check for handling of browser autofill background colors
+     */
+    checkMobileAutofillStyling(): Promise<CheckResult>;
+    /**
+     * 19. Thumb Zone Ergonomics
+     * Check that important actions are in thumb-reachable zones
+     */
+    checkThumbZoneErgonomics(): Promise<CheckResult>;
+    /**
+     * 20. Mobile Image Srcset
+     * Check for responsive images with srcset for bandwidth optimization
+     */
+    checkMobileImageSrcset(): Promise<CheckResult>;
+    /**
+     * 21. Tap Target Size
+     * Verify interactive elements meet minimum 44px tap target
+     * Note: This check focuses on explicit small dimensions, not icon sizes
+     */
+    checkTapTargetSize(): Promise<CheckResult>;
+    /**
+     * 22. Keyboard Dismiss Patterns
+     */
+    checkKeyboardDismiss(): Promise<CheckResult>;
+    /**
+     * 23. Navigation Depth
+     */
+    checkNavigationDepth(): Promise<CheckResult>;
+    /**
+     * 24. Touch Scroll Momentum
+     */
+    checkTouchScrollMomentum(): Promise<CheckResult>;
+    /**
+     * 25. Mobile Form Chunking
+     */
+    checkMobileFormChunking(): Promise<CheckResult>;
+    /**
+     * 26. Pinch-to-Zoom Accessibility
+     */
+    checkPinchToZoom(): Promise<CheckResult>;
+    /**
+     * 27. Text Selection
+     */
+    checkTextSelection(): Promise<CheckResult>;
+    /**
+     * 28. Mobile Date Pickers
+     */
+    checkMobileDatePickers(): Promise<CheckResult>;
+    /**
+     * 29. Network Status Indicator
+     * Check for offline/online status handling
+     */
+    checkNetworkStatusIndicator(): Promise<CheckResult>;
+    /**
+     * 30. iOS Smart App Banner
+     * Check for smart app banner meta tags
+     */
+    checkIOSSmartAppBanner(): Promise<CheckResult>;
+    /**
+     * 31. Color Scheme Detection
+     * Check for prefers-color-scheme handling
+     */
+    checkColorSchemeDetection(): Promise<CheckResult>;
+    /**
+     * 32. Haptic Feedback
+     * Check for vibration API on important actions
+     */
+    checkHapticFeedback(): Promise<CheckResult>;
+    /**
+     * 33. Font Loading Strategy
+     * Check for font-display and system font fallbacks
+     */
+    checkFontLoadingStrategy(): Promise<CheckResult>;
+    /**
+     * 34. Passive Event Listeners
+     * Check for passive scroll/touch listeners for better performance
+     */
+    checkPassiveEventListeners(): Promise<CheckResult>;
+    /**
+     * 35. Viewport Resize Handling
+     * Check for keyboard resize handling on Android
+     */
+    checkViewportResizeHandling(): Promise<CheckResult>;
+    /**
+     * 36. Network-Aware Loading
+     * Check for connection-aware image/data loading
+     */
+    checkNetworkAwareLoading(): Promise<CheckResult>;
+    /**
+     * Run all checks
+     */
+    runAll(filter?: string): Promise<ModuleResult>;
+}
+export { UIMobileUXModule };
+//# sourceMappingURL=ui-mobile-ux.d.ts.map

package/dist/checks/consolidated/ui-mobile-ux.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-mobile-ux.d.ts","sourceRoot":"","sources":["../../../src/checks/consolidated/ui-mobile-ux.ts"],"names":[],"mappings":"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"}