Migrate components to container/presentation pattern
Overview
This PR migrates all remaining components to the container/presentation pattern, separating logic (containers) from presentation (views). This improves testability, reusability, and maintainability. The migration includes 50+ components, with special attention to restoring QuoteBlock and LogoWall to match their original implementations exactly.
Changes
Component Migrations
High Priority Components: RelatedArticles, RuleStack, RuleCard, Header, RadioGroup, ToggleGroup
Medium Priority Components: SelectOption, ContextMenuItem, ContentContainer, ContentThumbnailTemplate
Homepage Components: HomeHeader, LogoWall, QuoteBlock (restored to original implementations)
Component Structure
Each migrated component now follows the pattern:
[ComponentName]/index.tsx - Re-exports container for backward compatibility
[ComponentName].container.tsx - Contains logic, hooks, state management
[ComponentName].view.tsx - Pure presentation component
[ComponentName].types.ts - TypeScript interfaces
Key Restorations
QuoteBlock: Restored to original implementation with correct variant system ("compact" | "standard" | "extended"), proper prop names (source instead of authorRole), hanging quotes styling, and error handling with fallback avatars
LogoWall: Restored to original implementation with correct logo sizes, ordering, responsive grid layout, and proper image optimization settings
HomeHeader: Restored to original implementation matching main branch structure exactly
Bug Fixes
Fixed build errors in MiniCard (type compatibility for wrapper props)
Fixed unused imports in Header and HomeHeader view components
Fixed unused props in Checkbox, Input, TextArea, Select, and ToggleGroup components
Fixed prop filtering in Input component to prevent DOM attribute warnings
Documentation
Pattern documented in docs/guides/container-presentation-pattern.md
Updated docs/README.md and docs/CUSTOM_HOOKS.md to reference new pattern
Screenshots
How to Test
Run all test suites:
npm test # Unit tests (305 passed)
npm run e2e # E2E tests (124 passed)
npm run e2e:performance # Performance tests (8 passed)
npm run visual:test # Visual regression (20 passed)
# Migrate components to container/presentation pattern
## Overview
This PR migrates all remaining components to the container/presentation pattern, separating logic (containers) from presentation (views). This improves testability, reusability, and maintainability. The migration includes 50+ components, with special attention to restoring QuoteBlock and LogoWall to match their original implementations exactly.
## Changes
### Component Migrations
- **High Priority Components**: RelatedArticles, RuleStack, RuleCard, Header, RadioGroup, ToggleGroup
- **Medium Priority Components**: SelectOption, ContextMenuItem, ContentContainer, ContentThumbnailTemplate
- **Additional Components**: NavigationItem, ContentLockup, MenuBarItem, MiniCard
- **Homepage Components**: HomeHeader, LogoWall, QuoteBlock (restored to original implementations)
### Component Structure
Each migrated component now follows the pattern:
- `[ComponentName]/index.tsx` - Re-exports container for backward compatibility
- `[ComponentName].container.tsx` - Contains logic, hooks, state management
- `[ComponentName].view.tsx` - Pure presentation component
- `[ComponentName].types.ts` - TypeScript interfaces
### Key Restorations
- **QuoteBlock**: Restored to original implementation with correct variant system ("compact" | "standard" | "extended"), proper prop names (`source` instead of `authorRole`), hanging quotes styling, and error handling with fallback avatars
- **LogoWall**: Restored to original implementation with correct logo sizes, ordering, responsive grid layout, and proper image optimization settings
- **HomeHeader**: Restored to original implementation matching main branch structure exactly
### Bug Fixes
- Fixed build errors in MiniCard (type compatibility for wrapper props)
- Fixed unused imports in Header and HomeHeader view components
- Fixed unused props in Checkbox, Input, TextArea, Select, and ToggleGroup components
- Fixed prop filtering in Input component to prevent DOM attribute warnings
### Documentation
- Pattern documented in `docs/guides/container-presentation-pattern.md`
- Updated `docs/README.md` and `docs/CUSTOM_HOOKS.md` to reference new pattern
## Screenshots
<!-- Visual regression tests confirm all components match original snapshots -->
## How to Test
1. **Run all test suites**:
npm test # Unit tests (305 passed)
npm run e2e # E2E tests (124 passed)
npm run e2e:performance # Performance tests (8 passed)
npm run visual:test # Visual regression (20 passed)
an.di
self-assigned this 2026-01-30 02:39:36 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Migrate components to container/presentation pattern
Overview
This PR migrates all remaining components to the container/presentation pattern, separating logic (containers) from presentation (views). This improves testability, reusability, and maintainability. The migration includes 50+ components, with special attention to restoring QuoteBlock and LogoWall to match their original implementations exactly.
Changes
Component Migrations
Component Structure
Each migrated component now follows the pattern:
[ComponentName]/index.tsx- Re-exports container for backward compatibility[ComponentName].container.tsx- Contains logic, hooks, state management[ComponentName].view.tsx- Pure presentation component[ComponentName].types.ts- TypeScript interfacesKey Restorations
sourceinstead ofauthorRole), hanging quotes styling, and error handling with fallback avatarsBug Fixes
Documentation
docs/guides/container-presentation-pattern.mddocs/README.mdanddocs/CUSTOM_HOOKS.mdto reference new patternScreenshots
How to Test
npm test # Unit tests (305 passed)
npm run e2e # E2E tests (124 passed)
npm run e2e:performance # Performance tests (8 passed)
npm run visual:test # Visual regression (20 passed)