Refactor Components #29

Merged

an.di merged 12 commits from adilallo/maintenance/RefactorComponents into main 2026-01-30 03:59:41 +00:00

Conversation 0 Commits 12 Files Changed 140

+4905 -2963

an.di commented 2026-01-30 02:39:36 +00:00

Owner

Copy Link

Copy Source

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

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)

# 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

an.di added 5 commits 2026-01-30 02:39:37 +00:00

First pass on component refactor 7b9101824a

Second pass on component refactor b5735bb2ad

Finish migrating components 539f6c62e3

Resolve errors with migrated components f7e0b5f517

Fix components based on failed tests ba3a15a7d2

an.di added 1 commit 2026-01-30 02:51:09 +00:00

Update gitea-runner.yaml 1f249f92ff

an.di added 1 commit 2026-01-30 02:55:54 +00:00

Update gitea-runner.yaml 89a2e7b1b7

an.di added 1 commit 2026-01-30 03:02:47 +00:00

Update gitea-runner.yaml 44c0a53c0b

an.di added 1 commit 2026-01-30 03:08:33 +00:00

Adjust runner script 5b77ed1c12

an.di added 1 commit 2026-01-30 03:18:06 +00:00

Additional runner support 16166f5cc5

an.di added 1 commit 2026-01-30 03:32:37 +00:00

Remove CI runner for now ca42982dea

an.di added 1 commit 2026-01-30 03:57:49 +00:00

Update local testing script and resolve errors adac7d0545

an.di merged commit 1714e7f930 into main 2026-01-30 03:59:41 +00:00

an.di deleted branch adilallo/maintenance/RefactorComponents 2026-01-30 03:59:41 +00:00

an.di referenced this issue from a commit 2026-01-30 03:59:42 +00:00

Merge pull request 'Refactor Components' (#29) from adilallo/maintenance/RefactorComponents into main

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

an.di (Andy DiLallo) ntnsndr (Nathan Schneider)

No Assignees an.di

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#29