React Chrono v3.0 - #554
Merged
Merged
Conversation
- Optimize 14 hooks with performance improvements (memoization, RAF throttling, stable callbacks) - Split large useTimelineNavigation into focused, composable hooks - Add comprehensive shared utilities for common hook patterns - Enhance useBackground with multi-format color support - Extend useEscapeKey to support multiple keys and modifiers - Generalize useMeasureHeight to measure any DOM property - Add device detection and viewport info to useWindowSize - Maintain backward compatibility throughout all changes - Fix all test failures and add comprehensive test coverage
• Fix toolbar overflow by implementing logical control grouping (NavigationGroup, SearchGroup, ActionGroup) • Enhance button sizes and spacing - navigation buttons 28px → 36px, improved touch targets • Add proper flex-wrap behavior to prevent cutoff, controls wrap to next line intelligently • Improve accessibility with keyboard navigation, focus states, and ARIA labels • Fix search input colors for dark mode, remove unwanted hover backgrounds • Update popover buttons to match navigation button dimensions and styling • Add responsive design improvements with better mobile layout
- Fix search input losing focus while typing by preventing aggressive refocus - Add smart auto-focus with 100ms delay for first search, 400ms for subsequent - Enhance dark mode text colors with proper theme detection fallbacks - Add blur prevention to maintain search focus during timeline navigation - Improve placeholder and autofill colors for better contrast in both themes
major ux fixes and bug fixes
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…UX improvements - Add fullscreen button component with proper theming and accessibility - Implement cross-browser fullscreen hook with comprehensive API support - Integrate fullscreen control into timeline toolbar - Fix button dimensions to match standard 36px toolbar buttons - Enhance search focus behavior and text color contrast in dark mode - Improve card content layout with better read-more functionality - Update popover styling and remove unnecessary margins - Add comprehensive test coverage for fullscreen components
…read more - Add vertical timeline scrolling during slideshow to keep cards visible - Centralize slideshow scroll logic in timeline.tsx for consistency - Convert read more button to link appearance (underlined text) - Remove button-style background, borders and shadows from read more - Fix slideshow card focus issues across all timeline modes
- Replace Cypress with Playwright for improved cross-browser support - Add comprehensive test configurations for E2E and component testing - Implement advanced Playwright features (trace viewer, parallel execution) - Support WebKit browsers and mobile device emulation - Add GitHub Actions workflow with matrix builds and sharding - Update .gitignore to exclude Playwright test artifacts - Remove Cypress dependency and replace test scripts - Add TypeScript fixtures and helpers for test reusability
- Add timeline-accessibility.spec.ts: keyboard navigation, ARIA attributes, screen reader support, focus management, color contrast, and motion accessibility - Add timeline-advanced-features.spec.ts: slideshow functionality, fullscreen controls, quick jump navigation, dark mode toggle, dynamic theme switching, responsive breakpoints, custom content, and dynamic loading - Add timeline-cardless-nested.spec.ts: cardless timeline modes, nested timeline structures, alternating nested layouts, and complex interaction handling - Add timeline-media.spec.ts: media-rich timelines, image/video content, YouTube integration, media loading states, error handling, and media settings configuration - Add timeline-navigation-controls.spec.ts: navigation buttons, timeline item selection, toolbar controls, scroll-based navigation, touch/mobile interactions, search filtering, and position navigation - Add timeline-performance.spec.ts: load performance testing, interaction responsiveness, memory usage monitoring, media loading optimization, animation performance, resource loading, stress testing, and performance monitoring - Add timeline-theme-responsive.spec.ts: theme switching, dynamic theme configuration, dark mode support, responsive design across viewports, breakpoint behavior, high DPI support, print media, and color scheme preferences - Enhance timeline-horizontal.spec.ts: add media content testing, slideshow functionality, and theme toggle support Covers all timeline modes (horizontal, vertical, alternating), advanced features, accessibility compliance, performance optimization, and responsive behavior across 3050+ lines of comprehensive test coverage.
│ - Test theme property validation, merging, consistency, and performance │ │ - Add fullscreen control component tests with proper mocking │ │ - Create comprehensive toolbar interaction and accessibility tests │ │ - Fix styled-components prop filtering with transient props │ │ - Enhance hex color validation to support 3-character formats │ │ - Update theme utility tests with proper size assertions │ │ - Improve test reliability and maintainability
…history - Implement complete dark mode theme with blue, amber, white color scheme - Add all 15+ dark mode properties for comprehensive theme customization - Update README with enhanced documentation: - Add fullscreen functionality section with cross-browser support details - Expand development commands with comprehensive pnpm script documentation - Update testing framework section with Playwright E2E and component testing - Enhance features list with search, fullscreen, and accessibility improvements - Integrate new demo into navigation with featured highlighting - Create adaptive theme that works seamlessly in both light and dark modes - Include proper dark mode props (darkMode, enableDarkToggle, onThemeChange)
…figuration
- Fix CSS selector mismatches in timeline tests by updating selectors to match actual DOM
structure
- Replace .rc-card-title with [data-class=""] or direct element searches
- Replace .rc-card-subtitle with .card-sub-title
- Replace .rc-card-text with .card-description
- Remove unnecessary .timeline-card-content wrapper selectors
- Optimize Playwright configuration for better performance:
- Reduce browser matrix from 7 to 1 (chromium only for now, others commented)
- Improve parallelization: 50% CPU cores locally, 2 workers on CI
- Reduce total test executions from ~1,085 to ~155
- Add split context architecture for performance optimization:
- Create separate contexts for Navigation, Theme, Media, and Layout
- Add MigrationContextProvider for backward compatibility
- Update components to use split contexts while maintaining legacy support
- Add useFocusManager hook for improved focus handling
- Update test utilities:
- Enhance customRender with TestWrapper integration
- Add efficient comparison utilities for props
- Fix timeline-card-content test setup
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
…act CSS - Create comprehensive v3.0 blog post (BLOG_V3.md) documenting all new features - Add DarkModeConfig interface in TimelineConfig.ts for better type organization - Update integration tests to validate Vanilla Extract CSS bundling and application - Add CSS verification tests checking for design tokens and hash-based class names - Configure static CSS filename (style.css) for consistent imports - Add CSS export to package.json for proper module resolution - Update demo app to explicitly import Vanilla Extract styles - Enhance integration test documentation with Vanilla Extract specifics
- Remove styled-components and related packages (fully migrated to Vanilla Extract) - Remove Husky, lint-staged, and git hook automation - Remove unused dev dependencies (c8, intersection-observer, semver, etc.) - Update package size limits (110KB -> 250KB) - Clean up stylelint and build configurations - Remove console.log debug statements from production code - Add ESLint rule for unused vars with underscore ignore pattern
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
React Chrono v3.0 🎉
🏗️ Core Improvements
Architecture Overhaul
safety
renders
New Grouped API
✨ New Features
🔤 Google Fonts Integration - Dynamic loading with per-element weight/style control
🌍 Comprehensive i18n - 40+ configurable text elements across 11 categories
🖥️ Fullscreen Mode - Cross-browser support with keyboard shortcuts
🌙 Enhanced Dark Mode - 25+ theme properties including shadows, glows, and search highlights
📌 Sticky Toolbar - Optional sticky positioning with configurable placement
🎴 Borderless Cards - Clean, minimal card variant
🔍 Advanced Search Config - Customizable widths and positioning
🎨 UX Enhancements
prefers-reduced-motion🧪 Testing & Quality
🐛 Key Bug Fixes
📚 Documentation
PROPS-REFERENCE.md)CLAUDE.md)BLOG_V3.md)🔄 Migration
100% backward compatible - All v2.x props continue to work:
📦 Stats
🔗 Resources
Related Issue(s)
Type of Change
How Has This Been Tested?
Screenshots / Screen Recordings (if applicable)
Checklist before requesting a review
AI Tooling Disclosure (Optional)
Used claude-code throghout the development of this new release