Updates_31072025 #554
Open
Updates_31072025 #554
+373,951
−183,043
Conversation
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
- 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}
.github/workflows/playwright.yml
Outdated
Comment on lines
66
to
99
| timeout-minutes: 30 | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
|
|
||
| - uses: pnpm/action-setup@v2 | ||
| with: | ||
| version: 8 | ||
|
|
||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 20 | ||
| cache: 'pnpm' | ||
|
|
||
| - name: Install dependencies | ||
| run: pnpm install --frozen-lockfile | ||
|
|
||
| - name: Install Playwright | ||
| run: pnpm exec playwright install --with-deps chromium | ||
|
|
||
| - name: Run component tests | ||
| run: pnpm exec playwright test -c playwright-ct.config.ts | ||
|
|
||
| - name: Upload component test results | ||
| uses: actions/upload-artifact@v4 | ||
| if: always() | ||
| with: | ||
| name: playwright-ct-results | ||
| path: | | ||
| playwright-ct-report/ | ||
| test-results/ | ||
| retention-days: 30 | ||
|
|
||
| report: |
Check warning
Code scanning / CodeQL
Workflow does not contain permissions Medium
Comment on lines
+100
to
+127
| needs: [test, test-components] | ||
| if: always() | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
|
|
||
| - uses: actions/download-artifact@v4 | ||
| with: | ||
| path: all-results | ||
| pattern: playwright-* | ||
|
|
||
| - name: Merge reports | ||
| run: | | ||
| npx playwright merge-reports --reporter html ./all-results/playwright-results-* | ||
|
|
||
| - name: Upload merged report | ||
| uses: actions/upload-artifact@v4 | ||
| with: | ||
| name: playwright-report | ||
| path: playwright-report/ | ||
| retention-days: 30 | ||
|
|
||
| - name: Deploy to GitHub Pages | ||
| if: github.ref == 'refs/heads/main' | ||
| uses: peaceiris/actions-gh-pages@v3 | ||
| with: | ||
| github_token: ${{ secrets.GITHUB_TOKEN }} | ||
| publish_dir: ./playwright-report |
Check warning
Code scanning / CodeQL
Workflow does not contain permissions Medium
…ract - Add React imports and proper TypeScript typing to all icon components - Replace styled-components with vanilla-extract CSS modules - Improve search controls with consistent button styling - Fix timeline fullscreen mode theme support - Update demo app styles from styled-components to vanilla-extract - Enhance dynamic item loading behavior to focus on new items - Standardize icon component naming and test IDs
…ive improvements - Fix double increment bug in slideshow progression causing skipped items - Resolve circular useEffect loop in main component state synchronization - Unify keyboard and slideshow navigation pathways for consistency - Add error boundary for crash prevention and better UX - Add performance optimizations with throttled scroll handlers - Add prop validation and memoized icon components - Extract slideItemDuration prop and fix timer initialization - Improve TypeScript types and remove any usage where possible
- Fix slideshow getting stuck on video elements by resuming when video pauses/ends - Prevent slideshow from auto-starting on component render - Standardize icon sizing across components (16px toolbar, 20px buttons, 24px controls) - Add IconWrapper component and base styles for consistent icon rendering - Update MediaState interface to include 'ended' property for video completion - Remove inconsistent Feather CSS classes in favor of standardized inline styles 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add proper ARIA labels and roles to timeline components - Fix keyboard navigation at first/last cards with improved focus management - Reduce scroll duration from 1200ms to 600ms for better responsiveness - Fix inverted textDensity mapping (compactText now correctly maps to LOW) - Add titles to popover buttons for better accessibility - Fix custom icon z-index to prevent timeline overlap - Disable default icon bounce animations in toolbar - Fix navigation using items.length instead of itemsMap.size - Add comprehensive accessibility documentation to README - Update keyboard navigation docs with Home/End key support
…tokens - Introduced `themes.css.ts` for defining light and dark themes using Vanilla Extract. - Added comprehensive design tokens for colors, spacing, typography, shadows, and more. - Created TypeScript definitions in `types.ts` for design system components and tokens. - Configured TypeScript build settings in `tsconfig.build.json` for type declaration generation. - Updated main `tsconfig.json` to support new paths and improved type declarations. - Enhanced Vite configuration to include visualizer for production builds and improved minification settings.
…oss workflows; improve caching strategy
Comment on lines
+11
to
+29
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
| - uses: pnpm/action-setup@v4 | ||
| with: | ||
| version: 10.15.1 | ||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 22 | ||
| cache: 'pnpm' | ||
| - run: pnpm install | ||
| - run: pnpm test -- --run | ||
| env: | ||
| CI: true | ||
| - run: pnpm build | ||
| - uses: actions/upload-artifact@v4 | ||
| with: | ||
| name: dist | ||
| path: dist |
Check warning
Code scanning / CodeQL
Workflow does not contain permissions Medium
Comment on lines
+10
to
+25
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
| - uses: pnpm/action-setup@v4 | ||
| with: | ||
| version: 10.15.1 | ||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 22 | ||
| registry-url: 'https://registry.npmjs.org' | ||
| cache: 'pnpm' | ||
| - run: pnpm install --frozen-lockfile | ||
| - run: pnpm build | ||
| - run: npm publish --provenance --access public | ||
| env: | ||
| NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} |
Check warning
Code scanning / CodeQL
Workflow does not contain permissions Medium
Comment on lines
+9
to
+20
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v4 | ||
| - uses: pnpm/action-setup@v4 | ||
| with: | ||
| version: 10.15.1 | ||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: 22 | ||
| cache: 'pnpm' | ||
| - run: pnpm install --frozen-lockfile | ||
| - run: pnpm size-limit |
Check warning
Code scanning / CodeQL
Workflow does not contain permissions Medium
…e in timeline components
…tions - Implemented FontProvider component for loading and applying Google Fonts. - Created google-fonts utility module for managing font configurations and loading. - Added index file for exporting font utilities and components. - Updated timeline components to utilize new font features. - Enhanced button styles in fullscreen and timeline controls for better UX. - Refactored ContentDisplay component to use CSS classes for styling. - Improved timeline scrolling behavior by disabling auto-navigation during keyboard navigation. - Added responsive font size adjustments and utility styles for typography. - Updated theme popover z-index for better layering. - Introduced TypeScript configuration for development environment. - Enhanced Vite configuration for improved development experience.
- Updated spacing, font sizes, and border radius definitions in light and dark themes for consistency. - Enhanced semantic color definitions for better readability. - Improved formatting of the code for better clarity and maintainability. - Refactored prop migration utility functions for better readability and structure. - Updated validation functions to improve error messaging and code clarity. - Cleaned up throttle and debounce utility functions for consistency in formatting.
…tter clarity and accuracy
- Introduced `toolbarSearchConfig` to allow customization of search input dimensions in the timeline toolbar. - Added support for `toolbarPosition` to specify the toolbar's placement (top or bottom). - Enhanced the `GlobalContext` and `TimelineContextProvider` to handle new toolbar configurations. - Updated CSS styles for responsive search input handling. - Modified demo components to showcase the new toolbar search features. - Ensured backward compatibility with existing configurations.
- Created a new test file for timeline props with various display, navigation, slideshow, theme, content, media, scrollable, responsive, and toolbar props tests. - Added test data for timeline items and props to facilitate testing. - Introduced a script to run tests in different modes and browsers.
- Add comprehensive demo site redesign with modern header, footer, and navigation - Implement Tailwind CSS v3 with proper PostCSS configuration - Create responsive sidebar navigation with categorized demo sections - Add HeroSection with gradient background and feature highlights - Fix full-width layout issues by removing conflicting CSS constraints - Integrate Google Fonts (Inter and Plus Jakarta Sans) for better typography - Resolve router navigation issues by removing conditional rendering - Ensure cross-browser compatibility with proper CSS prefixes - Update all demo pages to use consistent DemoPageLayout wrapper - Add proper responsive design for mobile and desktop experiences
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Code fixes, UX Improvements, Config updates
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)
Additional Context