Skip to content

refactor: componentize UI with shadcn/ui for better maintainability#35

Open
70-10 wants to merge 4 commits intomainfrom
shadcn-ui
Open

refactor: componentize UI with shadcn/ui for better maintainability#35
70-10 wants to merge 4 commits intomainfrom
shadcn-ui

Conversation

@70-10
Copy link
Copy Markdown
Owner

@70-10 70-10 commented Jun 29, 2025

Summary

  • Add shadcn/ui design system for consistent UI components and improved developer experience
  • Extract reusable components from monolithic page.tsx for better code organization
  • Implement TextInputPanel component for dual text input areas with shadcn/ui Textarea
  • Implement DiffDisplay component for clean diff visualization with improved styling
  • Implement ShareUrlSection component for URL sharing functionality with shadcn/ui Button and Card

Test plan

  • Run pnpm lint - passes without errors
  • Run pnpm test --run - all tests pass
  • Verify UI components render correctly
  • Test text input and diff calculation functionality
  • Test URL sharing and copy functionality
  • Manual testing of responsive design
  • Verify accessibility with screen readers

🤖 Generated with Claude Code

- Add shadcn/ui design system for consistent UI components
- Extract TextInputPanel component for dual text input areas
- Extract DiffDisplay component for diff visualization
- Extract ShareUrlSection component for URL sharing functionality
- Refactor page.tsx with improved separation of concerns

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

github-actions bot commented Jun 29, 2025

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 100% 474 / 474
🔵 Statements 100% 474 / 474
🔵 Functions 100% 13 / 13
🔵 Branches 98.38% 61 / 62
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/app/page.tsx 100% 100% 100% 100%
src/components/diff-display.tsx 100% 100% 100% 100%
src/components/share-url-section.tsx 100% 100% 100% 100%
src/components/text-input-panel.tsx 100% 100% 100% 100%
src/lib/utils.ts 100% 100% 100% 100%
tests/app/page.test.tsx 100% 90.9% 100% 100%
tests/components/diff-display.test.tsx 100% 100% 100% 100%
tests/components/share-url-section.test.tsx 100% 100% 100% 100%
tests/components/text-input-panel.test.tsx 100% 100% 100% 100%
Generated in workflow #265 for commit 402f3df by the Vitest Coverage Report Action

70-10 and others added 3 commits July 10, 2025 10:22
- Add comprehensive test suite with 90.51% coverage (exceeding 80% target)
- Implement TDD (Red-Green-Refactor) methodology for robust test design
- Add React Testing Library, jsdom, and vitest testing infrastructure
- Create 29 test cases covering all major components and functionality:
  - DiffDisplay component: diff rendering and CSS class validation
  - ShareUrlSection component: copy functionality and UI state management
  - TextInputPanel component: input handling and callback validation
  - Main page component: URL parsing, state management, and diff calculation
  - Utility functions: URL sharing and compression logic
- Configure comprehensive coverage reporting with appropriate exclusions
- Fix React import issues across components for test compatibility
- Establish proper test directory structure and setup files

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Change from 'pnpx vitest' to 'pnpm test' in GitHub workflow
- Fixes version mismatch between global vitest v3.2.4 and project vitest v2.1.8
- Resolves jsdom dependency resolution issues in CI environment

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Add coverage thresholds (80%) to vitest.config.ts for quality gates
- Configure GitHub Actions coverage report with threshold validation
- Set CI=true environment variable for faster test execution
- Add comprehensive coverage reporting with PR comments

Coverage thresholds:
- Statements: 80%
- Branches: 80%
- Functions: 80%
- Lines: 80%

Current coverage: 100%/98.41%/100%/100% (exceeds all thresholds)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

Coverage Report for Coverage Report

Status Category Percentage Covered / Total
🟢 Lines 100% (🎯 80%) 474 / 474
🟢 Statements 100% (🎯 80%) 474 / 474
🟢 Functions 100% (🎯 80%) 13 / 13
🟢 Branches 98.38% (🎯 80%) 61 / 62
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/app/page.tsx 100% 100% 100% 100%
src/components/diff-display.tsx 100% 100% 100% 100%
src/components/share-url-section.tsx 100% 100% 100% 100%
src/components/text-input-panel.tsx 100% 100% 100% 100%
src/lib/utils.ts 100% 100% 100% 100%
tests/app/page.test.tsx 100% 90.9% 100% 100%
tests/components/diff-display.test.tsx 100% 100% 100% 100%
tests/components/share-url-section.test.tsx 100% 100% 100% 100%
tests/components/text-input-panel.test.tsx 100% 100% 100% 100%
Generated in workflow #266 for commit 25238ed by the Vitest Coverage Report Action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant