200 lines
7.2 KiB
Markdown
200 lines
7.2 KiB
Markdown
# Component Inventory & Audit Report
|
|
|
|
> Generated: 2025-01-XX (Phase 4.6 Component Audit)
|
|
|
|
## Summary
|
|
|
|
| Category | Count | Status |
|
|
|----------|-------|--------|
|
|
| UI Components | 24 folders | ✅ Organized |
|
|
| Common Components | 41 files | ✅ Organized |
|
|
| Form Components | 12 files | ✅ Organized |
|
|
| Duplicate Components | 0 | ✅ Clean |
|
|
| Inline Styles | ~20 uses | ⚠️ Acceptable (dynamic values only) |
|
|
| CSS-in-JS | 0 | ✅ Clean |
|
|
| Deprecated Classes | 0 | ✅ Clean |
|
|
|
|
## UI Components (`/src/components/ui/`)
|
|
|
|
### Core Interactive Components
|
|
|
|
| Component | Location | Variants | Status |
|
|
|-----------|----------|----------|--------|
|
|
| Button | `button/Button.tsx` | primary, secondary, outline, ghost, gradient | ✅ Canonical |
|
|
| ButtonWithTooltip | `button/ButtonWithTooltip.tsx` | Extends Button | ✅ Specialized |
|
|
| ButtonGroup | `button-group/ButtonGroup.tsx` | - | ✅ Canonical |
|
|
| Modal | `modal/index.tsx` | - | ✅ Canonical |
|
|
| Dropdown | `dropdown/Dropdown.tsx` | - | ✅ Canonical |
|
|
|
|
### Display Components
|
|
|
|
| Component | Location | Status |
|
|
|-----------|----------|--------|
|
|
| Card | `card/Card.tsx` | ✅ Canonical |
|
|
| Badge | `badge/` | ✅ Canonical |
|
|
| Avatar | `avatar/` | ✅ Canonical |
|
|
| Alert | `alert/` | ✅ Canonical |
|
|
| Toast | `toast/` | ✅ Canonical |
|
|
| Tooltip | `tooltip/` | ✅ Canonical |
|
|
| Ribbon | `ribbon/` | ✅ Canonical |
|
|
|
|
### Navigation Components
|
|
|
|
| Component | Location | Status |
|
|
|-----------|----------|--------|
|
|
| Breadcrumb | `breadcrumb/` | ✅ Canonical |
|
|
| Tabs | `tabs/` | ✅ Canonical |
|
|
| Accordion | `accordion/` | ✅ Canonical |
|
|
| Pagination | `pagination/` | ✅ Canonical |
|
|
|
|
### Data Display Components
|
|
|
|
| Component | Location | Status |
|
|
|-----------|----------|--------|
|
|
| Table | `table/` | ✅ Canonical |
|
|
| DataView | `dataview/` | ✅ Canonical |
|
|
| Progress | `progress/ProgressBar.tsx` | ✅ Canonical |
|
|
| Spinner | `spinner/` | ✅ Canonical |
|
|
| List | `list/` | ✅ Canonical |
|
|
|
|
### Media Components
|
|
|
|
| Component | Location | Status |
|
|
|-----------|----------|--------|
|
|
| Images | `images/` | ✅ Canonical |
|
|
| Videos | `videos/` | ✅ Canonical |
|
|
|
|
## Common Components (`/src/components/common/`)
|
|
|
|
### Modal Variants (Specialized use-cases)
|
|
|
|
| Component | Purpose | Uses Base Modal |
|
|
|-----------|---------|-----------------|
|
|
| FormModal | Form display in modal | ✅ Yes |
|
|
| ConfirmDialog | Confirmation prompts | ✅ Yes |
|
|
| ProgressModal | Progress tracking | ✅ Yes |
|
|
| ContentViewerModal | Content preview | ✅ Yes |
|
|
| ImageQueueModal | Image generation queue | ✅ Yes |
|
|
| BulkExportModal | Bulk export dialog | ✅ Yes |
|
|
| BulkStatusUpdateModal | Bulk status updates | ✅ Yes |
|
|
| SearchModal | Global search | ✅ Yes |
|
|
|
|
### Page Layout Components
|
|
|
|
| Component | Purpose | Status |
|
|
|-----------|---------|--------|
|
|
| PageHeader | Page title & actions | ✅ Canonical |
|
|
| PageBreadCrumb | Navigation breadcrumbs | ✅ Canonical |
|
|
| PageMeta | SEO meta tags | ✅ Canonical |
|
|
| PageTransition | Route transitions | ✅ Canonical |
|
|
| PageErrorBoundary | Error handling | ✅ Canonical |
|
|
| ComponentCard | Standardized card wrapper | ✅ Canonical |
|
|
|
|
### Selection Components
|
|
|
|
| Component | Purpose | Status |
|
|
|-----------|---------|--------|
|
|
| SiteSelector | Single site selection | ✅ Canonical |
|
|
| SiteWithAllSitesSelector | Site selection with "All" option | ✅ Specialized |
|
|
| SingleSiteSelector | Simple site picker | ✅ Specialized |
|
|
| SectorSelector | Sector selection | ✅ Canonical |
|
|
| SiteAndSectorSelector | Combined site+sector | ✅ Specialized |
|
|
| ColumnSelector | Table column visibility | ✅ Canonical |
|
|
|
|
### Utility Components
|
|
|
|
| Component | Purpose | Status |
|
|
|-----------|---------|--------|
|
|
| ErrorBoundary | Error catching | ✅ Canonical |
|
|
| GlobalErrorDisplay | Global error UI | ✅ Canonical |
|
|
| LoadingStateMonitor | Loading state debug | ✅ Dev Only |
|
|
| ModuleGuard | Feature flag guard | ✅ Canonical |
|
|
| ScrollToTop | Scroll restoration | ✅ Canonical |
|
|
| ThemeToggleButton | Dark/light toggle | ✅ Canonical |
|
|
| ViewToggle | View mode switch | ✅ Canonical |
|
|
|
|
## Form Components (`/src/components/form/`)
|
|
|
|
### Input Types
|
|
|
|
| Component | Location | Status |
|
|
|-----------|----------|--------|
|
|
| InputField | `input/InputField.tsx` | ✅ Canonical |
|
|
| TextArea | `input/TextArea.tsx` | ✅ Canonical |
|
|
| Checkbox | `input/Checkbox.tsx` | ✅ Canonical |
|
|
| Radio | `input/Radio.tsx` | ✅ Canonical |
|
|
| RadioSm | `input/RadioSm.tsx` | ✅ Specialized |
|
|
| FileInput | `input/FileInput.tsx` | ✅ Canonical |
|
|
| Select | `Select.tsx` | ✅ Canonical |
|
|
| SelectDropdown | `SelectDropdown.tsx` | ✅ Specialized |
|
|
| MultiSelect | `MultiSelect.tsx` | ✅ Canonical |
|
|
| DatePicker | `date-picker.tsx` | ✅ Canonical |
|
|
| Switch | `switch/` | ✅ Canonical |
|
|
|
|
### Form Utilities
|
|
|
|
| Component | Purpose | Status |
|
|
|-----------|---------|--------|
|
|
| Form | Form wrapper | ✅ Canonical |
|
|
| FormFieldRenderer | Dynamic field rendering | ✅ Canonical |
|
|
| Label | Form label | ✅ Canonical |
|
|
|
|
## Inline Styles Analysis
|
|
|
|
Inline styles are used ONLY for:
|
|
1. **Dynamic values** (width percentages from props/state)
|
|
2. **Animation delays** (calculated from index)
|
|
3. **Z-index** (for stacking contexts)
|
|
4. **External libraries** (jvectormap, etc.)
|
|
|
|
These are acceptable uses as per DESIGN_SYSTEM.md guidelines.
|
|
|
|
### Files with Inline Styles (Verified)
|
|
|
|
| File | Reason | Status |
|
|
|------|--------|--------|
|
|
| AppSidebar.tsx | Logo positioning | ⚠️ Review needed |
|
|
| Dropdown.tsx | Dynamic positioning | ✅ Acceptable |
|
|
| AlertModal.tsx | Animation blur effects | ✅ Acceptable |
|
|
| ProgressBar.tsx | Dynamic width | ✅ Acceptable |
|
|
| ThreeWidgetFooter.tsx | Dynamic progress | ✅ Acceptable |
|
|
| ToastContainer.tsx | Animation delay | ✅ Acceptable |
|
|
| EnhancedTooltip.tsx | Z-index layering | ✅ Acceptable |
|
|
| PricingTable.tsx | Dynamic height | ✅ Acceptable |
|
|
| CountryMap.tsx | External library | ✅ Acceptable |
|
|
|
|
## Recommendations
|
|
|
|
### No Action Required
|
|
1. ✅ Button component system is well-organized
|
|
2. ✅ Modal variants properly extend base Modal
|
|
3. ✅ Form inputs are consolidated
|
|
4. ✅ No CSS-in-JS patterns found
|
|
5. ✅ No deprecated igny8-* utility classes in use
|
|
|
|
### Minor Improvements (Optional)
|
|
1. Consider moving sample-components/ HTML files to docs/
|
|
2. Review AppSidebar.tsx inline style for logo positioning
|
|
3. Consider adding Storybook for component documentation
|
|
|
|
## Verification Checklist
|
|
|
|
- [x] Button variants (primary, secondary, outline, ghost, gradient) - All in Button.tsx
|
|
- [x] Card components - Single Card.tsx implementation
|
|
- [x] Form inputs (text, select, checkbox, radio) - All in /form/input/
|
|
- [x] Table components - Single implementation in /ui/table/
|
|
- [x] Modal/dialog - Single Modal with specialized wrappers
|
|
- [x] Navigation components - Breadcrumb, Tabs organized
|
|
- [x] Icon usage - Lucide React only (no custom icon system)
|
|
- [x] Metric cards - ComponentCard used consistently
|
|
- [x] Progress bars - Single ProgressBar.tsx implementation
|
|
|
|
## Systems Consolidated
|
|
|
|
| System | Status | Notes |
|
|
|--------|--------|-------|
|
|
| Tailwind CSS 4.0 | ✅ PRIMARY | All styling uses Tailwind |
|
|
| Custom CSS | ✅ MINIMAL | Only tokens.css and module-specific |
|
|
| Inline Styles | ✅ CONTROLLED | Only for dynamic values |
|
|
| CSS-in-JS | ✅ NONE | Not present in codebase |
|