155 lines
5.1 KiB
Markdown
155 lines
5.1 KiB
Markdown
# Component Organization Guide
|
|
|
|
This document describes the organized folder structure for the Svelte components in the Twitch Panels Creator project.
|
|
|
|
## 📁 Folder Structure
|
|
|
|
```
|
|
src/components/
|
|
├── layout/ # Application layout components
|
|
├── image/ # Image-related components
|
|
├── text/ # Text management components
|
|
├── panel/ # Panel display and management
|
|
├── feedback/ # User feedback components
|
|
└── ui/ # Reusable UI components (from lib)
|
|
```
|
|
|
|
## 🏗️ Layout Components
|
|
|
|
**Location**: `src/components/layout/`
|
|
|
|
Components that define the overall application structure and layout:
|
|
|
|
- **AppContainer.svelte** - Main application wrapper and coordinator
|
|
- **AppHeader.svelte** - Application header with title and actions
|
|
- **AppContent.svelte** - Main content area container
|
|
- **MainSection.svelte** - Primary workspace section
|
|
- **Sidebar.svelte** - Side panel for previews and controls
|
|
|
|
## 🖼️ Image Components
|
|
|
|
**Location**: `src/components/image/`
|
|
|
|
Components related to image upload, processing, and display:
|
|
|
|
- **ImageManager.svelte** - Orchestrates image upload and cropping workflow
|
|
- **ImageUpload.svelte** - Handles drag-drop, paste, and URL image upload
|
|
- **ImageCropper.svelte** - Provides image cropping interface with cropperjs
|
|
- **BackgroundPreview.svelte** - Displays the background image preview
|
|
|
|
## 📝 Text Components
|
|
|
|
**Location**: `src/components/text/`
|
|
|
|
Components for text management and display:
|
|
|
|
- **TextManager.svelte** - Main text input and settings management
|
|
- **TextSection.svelte** - Text management section wrapper
|
|
- **TextPreview.svelte** - Preview of text styling and positioning
|
|
|
|
## 🎨 Panel Components
|
|
|
|
**Location**: `src/components/panel/`
|
|
|
|
Components for panel creation, preview, and management:
|
|
|
|
- **PanelPreview.svelte** - Individual panel preview with canvas rendering
|
|
- **PanelsList.svelte** - List of all created panels
|
|
- **PanelList.svelte** - Alternative panel list implementation
|
|
|
|
## 💬 Feedback Components
|
|
|
|
**Location**: `src/components/feedback/`
|
|
|
|
Components for user feedback and error handling:
|
|
|
|
- **ErrorMessage.svelte** - Displays error messages to users
|
|
|
|
## 🧩 UI Components
|
|
|
|
**Location**: `src/components/ui/` (from lib)
|
|
|
|
Reusable UI components:
|
|
|
|
- **Button.svelte** - Standard button component
|
|
- **IconButton.svelte** - Button with icon support
|
|
|
|
## 🔧 Import Conventions
|
|
|
|
When importing components, follow these patterns:
|
|
|
|
```typescript
|
|
// Layout components
|
|
import AppContainer from "../components/layout/AppContainer.svelte";
|
|
import AppHeader from "../components/layout/AppHeader.svelte";
|
|
|
|
// Image components
|
|
import ImageManager from "../components/image/ImageManager.svelte";
|
|
import ImageUpload from "../components/image/ImageUpload.svelte";
|
|
|
|
// Text components
|
|
import TextManager from "../components/text/TextManager.svelte";
|
|
import TextSection from "../components/text/TextSection.svelte";
|
|
|
|
// Panel components
|
|
import PanelPreview from "../components/panel/PanelPreview.svelte";
|
|
import PanelsList from "../components/panel/PanelsList.svelte";
|
|
|
|
// Feedback components
|
|
import ErrorMessage from "../components/feedback/ErrorMessage.svelte";
|
|
|
|
// UI components
|
|
import { Button } from "../lib/components/ui";
|
|
```
|
|
|
|
## 🎯 Benefits of This Organization
|
|
|
|
1. **Logical Grouping**: Components are grouped by functionality, making them easy to find
|
|
2. **Maintainability**: Related components are co-located, reducing cognitive load
|
|
3. **Scalability**: Easy to add new components to appropriate categories
|
|
4. **Import Clarity**: Clear import paths that reflect component purpose
|
|
5. **Team Collaboration**: Consistent structure that team members can follow
|
|
|
|
## 📋 Component Responsibilities
|
|
|
|
### Layout Components
|
|
|
|
- Handle application-wide structure and navigation
|
|
- Manage high-level state and data flow
|
|
- Provide containers for functional components
|
|
|
|
### Image Components
|
|
|
|
- Handle all image-related operations (upload, crop, preview)
|
|
- Manage image state and validation
|
|
- Provide image processing functionality
|
|
|
|
### Text Components
|
|
|
|
- Manage text input, editing, and styling
|
|
- Handle text validation and state
|
|
- Provide text preview functionality
|
|
|
|
### Panel Components
|
|
|
|
- Handle panel creation and management
|
|
- Provide panel preview and export functionality
|
|
- Manage panel state and interactions
|
|
|
|
### Feedback Components
|
|
|
|
- Display user feedback and error messages
|
|
- Handle user notifications and alerts
|
|
- Provide consistent error handling UI
|
|
|
|
## 🔄 Future Considerations
|
|
|
|
As the project grows, consider:
|
|
|
|
1. **Sub-categorization**: Further divide categories if they become too large
|
|
2. **Feature-based organization**: Group by feature rather than type for larger applications
|
|
3. **Component documentation**: Add individual component documentation
|
|
4. **Storybook integration**: Use Storybook for component development and testing
|
|
|
|
This organization provides a solid foundation for the current project while remaining flexible for future expansion.
|