206 lines
6.7 KiB
Markdown
206 lines
6.7 KiB
Markdown
# PHASE 7: UI COMPONENTS & MODULE SETTINGS
|
|
**Detailed Implementation Plan**
|
|
|
|
**Goal**: Build comprehensive UI system with shared components, module settings, and site management.
|
|
|
|
**Timeline**: 3-4 weeks
|
|
**Priority**: MEDIUM
|
|
**Dependencies**: Phase 0, Phase 3, Phase 5
|
|
|
|
---
|
|
|
|
## TABLE OF CONTENTS
|
|
|
|
1. [Overview](#overview)
|
|
2. [Global Component Library](#global-component-library)
|
|
3. [Module Settings UI](#module-settings-ui)
|
|
4. [Frontend Module Loader](#frontend-module-loader)
|
|
5. [Site Management UI](#site-management-ui)
|
|
6. [Layout & Template System](#layout--template-system)
|
|
7. [CMS Styling System](#cms-styling-system)
|
|
8. [Testing & Validation](#testing--validation)
|
|
9. [Implementation Checklist](#implementation-checklist)
|
|
|
|
---
|
|
|
|
## OVERVIEW
|
|
|
|
### Objectives
|
|
- ✅ Complete global component library
|
|
- ✅ Implement module settings UI
|
|
- ✅ Build site management UI
|
|
- ✅ Create layout and template system
|
|
- ✅ Implement CMS styling system
|
|
|
|
### Key Principles
|
|
- **No Duplication**: All components shared across apps
|
|
- **TypeScript**: All components use TypeScript
|
|
- **Accessibility**: All components accessible (ARIA)
|
|
- **Responsive**: All components responsive
|
|
|
|
---
|
|
|
|
## GLOBAL COMPONENT LIBRARY
|
|
|
|
### 7.1 Global Component Library
|
|
|
|
| Task | File | Dependencies | Implementation |
|
|
|------|------|--------------|----------------|
|
|
| **Component Library Structure** | `frontend/src/components/shared/` | None | Complete component library |
|
|
| **Block Components** | `frontend/src/components/shared/blocks/` | None | All block components |
|
|
| **Layout Components** | `frontend/src/components/shared/layouts/` | None | All layout components |
|
|
| **Template Components** | `frontend/src/components/shared/templates/` | None | All template components |
|
|
| **Component Documentation** | `frontend/src/components/shared/README.md` | None | Document all components |
|
|
| **Component Storybook** | `frontend/.storybook/` | Optional | Component documentation |
|
|
| **Component Tests** | `frontend/src/components/shared/**/*.test.tsx` | None | Test all components |
|
|
|
|
**Component Standards**:
|
|
- All components use TypeScript
|
|
- All components have props interfaces
|
|
- All components are responsive
|
|
- All components support dark mode
|
|
- All components are accessible (ARIA)
|
|
- No duplicate components
|
|
|
|
---
|
|
|
|
## MODULE SETTINGS UI
|
|
|
|
### 7.2 Module Settings UI
|
|
|
|
| Task | File | Dependencies | Implementation |
|
|
|------|------|--------------|----------------|
|
|
| **Module Settings Page** | `frontend/src/pages/Settings/Modules.tsx` | EXISTING (implement) | Module settings interface |
|
|
| **Module Toggle Component** | `frontend/src/components/settings/ModuleToggle.tsx` | NEW | Toggle module on/off |
|
|
| **Module Status Indicator** | `frontend/src/components/settings/ModuleStatus.tsx` | NEW | Show module status |
|
|
| **Module Configuration** | `frontend/src/components/settings/ModuleConfig.tsx` | NEW | Module configuration UI |
|
|
|
|
**Module Settings Features**:
|
|
- Enable/disable modules per account
|
|
- Module-specific configuration
|
|
- Module status display
|
|
- Module usage statistics
|
|
- Module dependencies check
|
|
|
|
---
|
|
|
|
## FRONTEND MODULE LOADER
|
|
|
|
### 7.3 Frontend Module Loader
|
|
|
|
| Task | File | Dependencies | Implementation |
|
|
|------|------|--------------|----------------|
|
|
| **Module Config** | `frontend/src/config/modules.config.ts` | Phase 0 | Module configuration |
|
|
| **Module Guard** | `frontend/src/components/common/ModuleGuard.tsx` | Phase 0 | Route guard component |
|
|
| **Conditional Route Loading** | `frontend/src/App.tsx` | Phase 0 | Conditional routes |
|
|
| **Sidebar Module Filter** | `frontend/src/layout/AppSidebar.tsx` | Phase 0 | Filter disabled modules |
|
|
|
|
---
|
|
|
|
## SITE MANAGEMENT UI
|
|
|
|
### 7.4 Site Management UI
|
|
|
|
| Task | File | Dependencies | Implementation |
|
|
|------|------|--------------|----------------|
|
|
| **Site List View** | `frontend/src/pages/Sites/List.tsx` | NEW | List all sites |
|
|
| **Site Dashboard** | `frontend/src/pages/Sites/Dashboard.tsx` | NEW | Site overview |
|
|
| **Site Content Manager** | `frontend/src/pages/Sites/Content.tsx` | NEW | Manage site content |
|
|
| **Post Editor** | `frontend/src/pages/Sites/PostEditor.tsx` | NEW | Edit posts |
|
|
| **Page Manager** | `frontend/src/pages/Sites/Pages.tsx` | NEW | Manage pages |
|
|
| **Site Settings** | `frontend/src/pages/Sites/Settings.tsx` | NEW | Site settings |
|
|
| **Site Preview** | `frontend/src/pages/Sites/Preview.tsx` | NEW | Preview site |
|
|
|
|
---
|
|
|
|
## LAYOUT & TEMPLATE SYSTEM
|
|
|
|
### 7.5 Layout & Template System
|
|
|
|
| Task | File | Dependencies | Implementation |
|
|
|------|------|--------------|----------------|
|
|
| **Layout Selector** | `frontend/src/components/sites/LayoutSelector.tsx` | NEW | Select layout |
|
|
| **Template Library** | `frontend/src/components/sites/TemplateLibrary.tsx` | NEW | Template library |
|
|
| **Layout Preview** | `frontend/src/components/sites/LayoutPreview.tsx` | NEW | Preview layouts |
|
|
| **Template Customizer** | `frontend/src/components/sites/TemplateCustomizer.tsx` | NEW | Customize templates |
|
|
| **Style Editor** | `frontend/src/components/sites/StyleEditor.tsx` | NEW | Edit styles |
|
|
|
|
**Layout Options**:
|
|
- Default Layout
|
|
- Minimal Layout
|
|
- Magazine Layout
|
|
- Ecommerce Layout
|
|
- Portfolio Layout
|
|
- Blog Layout
|
|
- Corporate Layout
|
|
|
|
---
|
|
|
|
## CMS STYLING SYSTEM
|
|
|
|
### 7.6 CMS Styling System
|
|
|
|
| Task | File | Dependencies | Implementation |
|
|
|------|------|--------------|----------------|
|
|
| **CMS Theme System** | `frontend/src/styles/cms/` | NEW | Theme system |
|
|
| **Style Presets** | `frontend/src/styles/cms/presets.ts` | NEW | Style presets |
|
|
| **Color Schemes** | `frontend/src/styles/cms/colors.ts` | NEW | Color schemes |
|
|
| **Typography System** | `frontend/src/styles/cms/typography.ts` | NEW | Typography system |
|
|
| **Component Styles** | `frontend/src/styles/cms/components.ts` | NEW | Component styles |
|
|
|
|
**CMS Features**:
|
|
- Theme customization
|
|
- Color palette management
|
|
- Typography settings
|
|
- Component styling
|
|
- Responsive breakpoints
|
|
- Dark/light mode
|
|
|
|
---
|
|
|
|
## TESTING & VALIDATION
|
|
|
|
### 7.7 Testing
|
|
|
|
**Test Cases**:
|
|
- ✅ All components render correctly
|
|
- ✅ Module settings enable/disable modules
|
|
- ✅ Disabled modules don't load
|
|
- ✅ Site management works end-to-end
|
|
- ✅ Layout system works
|
|
- ✅ Template system works
|
|
- ✅ No duplicate components
|
|
|
|
---
|
|
|
|
## IMPLEMENTATION CHECKLIST
|
|
|
|
### Frontend Tasks
|
|
|
|
- [ ] Complete component library
|
|
- [ ] Implement module settings UI
|
|
- [ ] Create module loader
|
|
- [ ] Create site management UI
|
|
- [ ] Create layout system
|
|
- [ ] Create template system
|
|
- [ ] Create CMS styling system
|
|
- [ ] Write component tests
|
|
- [ ] Write component documentation
|
|
|
|
---
|
|
|
|
## SUCCESS CRITERIA
|
|
|
|
- ✅ All components render correctly
|
|
- ✅ Module settings enable/disable modules
|
|
- ✅ Disabled modules don't load
|
|
- ✅ Site management works end-to-end
|
|
- ✅ Layout system works
|
|
- ✅ Template system works
|
|
- ✅ No duplicate components
|
|
|
|
---
|
|
|
|
**END OF PHASE 7 DOCUMENT**
|
|
|