adilallo/maintanence/ComponentOrganizationPolish #40

2026-02-07T05:30:46Z

an.di commented

2026-02-07 05:30:46 +00:00

Component Reorganization, Figma Prop Alignment, and TopNav Consolidation

Overview

This PR implements a comprehensive reorganization of the component library, aligns all component props with Figma design specifications, consolidates navigation components into a unified TopNav, and restructures the app using Next.js route groups. This work establishes a cleaner, more maintainable codebase with a single source of truth for component APIs aligned with design specifications.

Changes

Component Reorganization

Organized components into logical folders:
- buttons/ - Button components
- cards/ - Card components (IconCard, MiniCard, NumberCard, RuleCard)
- content/ - Content-related components (ContentContainer, ContentThumbnailTemplate)
- controls/ - Form controls (Checkbox, MultiSelect, SelectInput, Switch, TextArea, TextInput, Toggle, etc.)
- ContextMenu/ - Context menu components
- icons/ - Icon components
- localization/ - Localization components (LanguageSwitcher)
- modals/ - Modal components (Alert, Create, Tooltip)
- navigation/ - Navigation components (Footer, MenuBar, MenuBarItem, TopNav)
- progress/ - Progress components (ProportionBar, Stepper)
- sections/ - Section components (AskOrganizer, FeatureGrid, HeroBanner, NumberedCards, QuoteBlock, RelatedArticles, RuleStack)
- type/ - Typography components (ContentLockup)
- utility/ - Utility components (InputLabel, ModalFooter, ModalHeader, Separator)

TopNav Consolidation

Removed multiple header components:
- Deleted Header, HomeHeader, ConditionalHeader, and HeaderTab components
- Consolidated all navigation functionality into a single TopNav component
- TopNav now handles all variants (folderTop true/false, loggedIn states, responsive breakpoints)
- Added TopNavWithPathname wrapper for client-side pathname handling
- Updated all page imports to use the unified TopNav component

Figma Prop Alignment

Button Component:
- Replaced variant prop with buttonType + palette props
- Added buttonState, hasIconLeading, hasIconFollowing, hasText props
- Supports both PascalCase (Figma) and lowercase (codebase) formats
- Updated all Button usages across the codebase (25+ files)
Switch Component:
- Replaced checked and label props with propSwitch and text props
- Updated all Switch usages and tests
MultiSelect Component:
- Replaced showAddButton prop with addButton prop
- Updated all MultiSelect usages
SelectInput Component:
- Replaced old label string prop with labelText + showLabel props
- Added 8 Figma props: asterisk, iconHelp, textOptional, textData, iconRight, textHint, showLabel, state
- Updated all SelectInput usages and tests
TextInput Component:
- Added textHint and formHeader props (Figma alignment)
- Updated all TextInput usages
TextArea Component:
- Added textHint, formHeader, and showHelpIcon props (Figma alignment)
- Updated all TextArea usages
Alert Component:
- Added hasLeadingIcon and hasBodyText props (Figma alignment)
- Updated Alert rendering logic
Create Modal Component:
- Added 6 content type props: createBlockArray, textInput, textArea, multiSelect, upload, proportion
- Updated Create modal types
ModalFooter Component:
- Added stepper prop (Figma alignment)
- Updated ModalFooter rendering logic

Backward Compatibility Removal

Removed all backward compatibility code:
- Removed variant prop support from Button (now uses buttonType + palette)
- Removed checked and label props from Switch (now uses propSwitch + text)
- Removed showAddButton prop from MultiSelect (now uses addButton)
- Removed old label prop from SelectInput (now uses labelText + showLabel)
- Cleaned up normalizeVariant function and VariantValue type from propNormalization
- All components now use only Figma-aligned prop names

Progress → ProportionBar Rename

Renamed Progress component to ProportionBar:
- Updated component directory: progress/Progress/ → progress/ProportionBar/
- Updated all file names and exports
- Updated all imports across codebase (stories, tests, components)
- Enhanced ProportionBar with:
  - Right corner rounding at 100% completion (ready for future "3-3" state)
  - Improved descriptive aria-labels for accessibility
  - Better screen reader support with contextual progress descriptions

Next.js Route Groups

Organized app directory using route groups:
- (marketing)/ - Marketing pages (home, blog, learn)
- (admin)/ - Admin pages (monitor)
- (dev)/ - Development pages (components-preview)
- Route groups don't affect URLs but provide logical organization
- Updated all import paths in moved pages and tests

Prop Normalization Updates

Enhanced propNormalization.ts:
- Added normalizeButtonType, normalizeButtonPalette, normalizeButtonState functions
- Added ButtonTypeValue, ButtonPaletteValue, ButtonStateValue types
- Removed deprecated normalizeVariant function and VariantValue type
- All normalization functions support both PascalCase (Figma) and lowercase (codebase) formats

Story Updates

Reorganized Storybook stories to match new component organization
Updated all story imports to reflect new component paths
Removed stories for deleted components (Header, HomeHeader, ConditionalHeader, HeaderTab, Progress)
Added new stories for TopNav and ProportionBar
Updated Button stories to use new buttonType + palette props (56+ usages updated)
Updated Switch stories to use propSwitch + text props
Updated MultiSelect stories to use addButton prop

Test Updates

Updated all test files to match new component organization and prop names
Removed tests for deleted components (Header)
Added comprehensive TopNav tests
Updated ProportionBar tests (renamed from Progress)
Updated Button tests to use buttonType + palette
Updated Switch tests to use propSwitch + text
Updated MultiSelect tests to use addButton
Updated SelectInput tests to use labelText + showLabel
Updated page tests to reflect route group structure
All 390 tests passing (4 skipped)

Import Path Fixes

Fixed import paths in route group pages:
- app/(admin)/monitor/page.tsx - Fixed component imports
- app/(marketing)/learn/page.tsx - Fixed ContentThumbnailTemplate import
All imports now correctly resolve from route group directories

# Component Reorganization, Figma Prop Alignment, and TopNav Consolidation ## Overview This PR implements a comprehensive reorganization of the component library, aligns all component props with Figma design specifications, consolidates navigation components into a unified TopNav, and restructures the app using Next.js route groups. This work establishes a cleaner, more maintainable codebase with a single source of truth for component APIs aligned with design specifications. ## Changes ### Component Reorganization - **Organized components into logical folders**: - `buttons/` - Button components - `cards/` - Card components (IconCard, MiniCard, NumberCard, RuleCard) - `content/` - Content-related components (ContentContainer, ContentThumbnailTemplate) - `controls/` - Form controls (Checkbox, MultiSelect, SelectInput, Switch, TextArea, TextInput, Toggle, etc.) - `ContextMenu/` - Context menu components - `icons/` - Icon components - `localization/` - Localization components (LanguageSwitcher) - `modals/` - Modal components (Alert, Create, Tooltip) - `navigation/` - Navigation components (Footer, MenuBar, MenuBarItem, TopNav) - `progress/` - Progress components (ProportionBar, Stepper) - `sections/` - Section components (AskOrganizer, FeatureGrid, HeroBanner, NumberedCards, QuoteBlock, RelatedArticles, RuleStack) - `type/` - Typography components (ContentLockup) - `utility/` - Utility components (InputLabel, ModalFooter, ModalHeader, Separator) ### TopNav Consolidation - **Removed multiple header components**: - Deleted `Header`, `HomeHeader`, `ConditionalHeader`, and `HeaderTab` components - Consolidated all navigation functionality into a single `TopNav` component - `TopNav` now handles all variants (folderTop true/false, loggedIn states, responsive breakpoints) - Added `TopNavWithPathname` wrapper for client-side pathname handling - Updated all page imports to use the unified `TopNav` component ### Figma Prop Alignment - **Button Component**: - Replaced `variant` prop with `buttonType` + `palette` props - Added `buttonState`, `hasIconLeading`, `hasIconFollowing`, `hasText` props - Supports both PascalCase (Figma) and lowercase (codebase) formats - Updated all Button usages across the codebase (25+ files) - **Switch Component**: - Replaced `checked` and `label` props with `propSwitch` and `text` props - Updated all Switch usages and tests - **MultiSelect Component**: - Replaced `showAddButton` prop with `addButton` prop - Updated all MultiSelect usages - **SelectInput Component**: - Replaced old `label` string prop with `labelText` + `showLabel` props - Added 8 Figma props: `asterisk`, `iconHelp`, `textOptional`, `textData`, `iconRight`, `textHint`, `showLabel`, `state` - Updated all SelectInput usages and tests - **TextInput Component**: - Added `textHint` and `formHeader` props (Figma alignment) - Updated all TextInput usages - **TextArea Component**: - Added `textHint`, `formHeader`, and `showHelpIcon` props (Figma alignment) - Updated all TextArea usages - **Alert Component**: - Added `hasLeadingIcon` and `hasBodyText` props (Figma alignment) - Updated Alert rendering logic - **Create Modal Component**: - Added 6 content type props: `createBlockArray`, `textInput`, `textArea`, `multiSelect`, `upload`, `proportion` - Updated Create modal types - **ModalFooter Component**: - Added `stepper` prop (Figma alignment) - Updated ModalFooter rendering logic ### Backward Compatibility Removal - **Removed all backward compatibility code**: - Removed `variant` prop support from Button (now uses `buttonType` + `palette`) - Removed `checked` and `label` props from Switch (now uses `propSwitch` + `text`) - Removed `showAddButton` prop from MultiSelect (now uses `addButton`) - Removed old `label` prop from SelectInput (now uses `labelText` + `showLabel`) - Cleaned up `normalizeVariant` function and `VariantValue` type from propNormalization - All components now use only Figma-aligned prop names ### Progress → ProportionBar Rename - **Renamed Progress component to ProportionBar**: - Updated component directory: `progress/Progress/` → `progress/ProportionBar/` - Updated all file names and exports - Updated all imports across codebase (stories, tests, components) - Enhanced ProportionBar with: - Right corner rounding at 100% completion (ready for future "3-3" state) - Improved descriptive aria-labels for accessibility - Better screen reader support with contextual progress descriptions ### Next.js Route Groups - **Organized app directory using route groups**: - `(marketing)/` - Marketing pages (home, blog, learn) - `(admin)/` - Admin pages (monitor) - `(dev)/` - Development pages (components-preview) - Route groups don't affect URLs but provide logical organization - Updated all import paths in moved pages and tests ### Prop Normalization Updates - **Enhanced propNormalization.ts**: - Added `normalizeButtonType`, `normalizeButtonPalette`, `normalizeButtonState` functions - Added `ButtonTypeValue`, `ButtonPaletteValue`, `ButtonStateValue` types - Removed deprecated `normalizeVariant` function and `VariantValue` type - All normalization functions support both PascalCase (Figma) and lowercase (codebase) formats ### Story Updates - **Reorganized Storybook stories** to match new component organization - Updated all story imports to reflect new component paths - Removed stories for deleted components (Header, HomeHeader, ConditionalHeader, HeaderTab, Progress) - Added new stories for TopNav and ProportionBar - Updated Button stories to use new `buttonType` + `palette` props (56+ usages updated) - Updated Switch stories to use `propSwitch` + `text` props - Updated MultiSelect stories to use `addButton` prop ### Test Updates - **Updated all test files** to match new component organization and prop names - Removed tests for deleted components (Header) - Added comprehensive TopNav tests - Updated ProportionBar tests (renamed from Progress) - Updated Button tests to use `buttonType` + `palette` - Updated Switch tests to use `propSwitch` + `text` - Updated MultiSelect tests to use `addButton` - Updated SelectInput tests to use `labelText` + `showLabel` - Updated page tests to reflect route group structure - All 390 tests passing (4 skipped) ### Import Path Fixes - Fixed import paths in route group pages: - `app/(admin)/monitor/page.tsx` - Fixed component imports - `app/(marketing)/learn/page.tsx` - Fixed ContentThumbnailTemplate import - All imports now correctly resolve from route group directories

an.di added 15 commits 2026-02-07 05:30:46 +00:00

Start organizational migration db3c0274f6

Reorganize components 6f178e934f

Update stories to match new component organization aef04c525a

Update and resolves tests e3478e6105

Rename header components into one TopNav 0aaa694fab

Remove conditional header component d5c7262794

Update TopNav component 162fdf94db

Update proportion bar component 85ff3b8f01

Update props in components 1ca11a2229

Update props in components pass 2 af0888798f

Remove backwards compatibility 8c7c074d59