Browse Source

docs: fix MD032 linting issues in GiftedDialog documentation

- Add blank lines before and after all lists throughout the document
- Fix Table of Contents, Key Features, Design Principles lists
- Fix Component Hierarchy, Key Responsibilities, Key Methods lists
- Fix all other lists in component documentation sections
- Ensure proper Markdown formatting compliance
- Improve readability and maintainability

Resolves MD032/blanks-around-lists linting violations
matthew-scratch-2025-06-28
Matthew Raymer 2 months ago
parent
commit
46814ebf5d
  1. 253
      GiftedDialog-Complete-Documentation.md

253
GiftedDialog-Complete-Documentation.md

@ -20,19 +20,29 @@ The GiftedDialog system is a sophisticated multi-step dialog for recording gifts
### Key Features ### Key Features
- **Two-Step Workflow**: Entity selection → Gift details - **Two-Step Workflow**: Entity selection → Gift details
- **Multi-Entity Support**: People, projects, and special entities - **Multi-Entity Support**: People, projects, and special entities
- **Conflict Detection**: Prevents invalid gift combinations - **Conflict Detection**: Prevents invalid gift combinations
- **Responsive Design**: Works across all device sizes - **Responsive Design**: Works across all device sizes
- **Accessibility**: Full keyboard navigation and screen reader support - **Accessibility**: Full keyboard navigation and screen reader support
- **Validation**: Comprehensive form validation and error handling - **Validation**: Comprehensive form validation and error handling
- **Flexible Integration**: Can be embedded in any view with different contexts - **Flexible Integration**: Can be embedded in any view with different contexts
### Design Principles ### Design Principles
- **Single Responsibility**: Each component has one clear purpose - **Single Responsibility**: Each component has one clear purpose
- **Composition over Inheritance**: Built through component composition - **Composition over Inheritance**: Built through component composition
- **Reactive Data Flow**: Vue's reactivity system for state management - **Reactive Data Flow**: Vue's reactivity system for state management
- **Progressive Enhancement**: Core functionality works without JavaScript - **Progressive Enhancement**: Core functionality works without JavaScript
- **Privacy by Design**: Respects user privacy and data sovereignty - **Privacy by Design**: Respects user privacy and data sovereignty
## Architecture Diagram ## Architecture Diagram
@ -84,26 +94,162 @@ graph TB
SAC --> ROUTER SAC --> ROUTER
``` ```
### ASCII Art Architecture Diagram
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ GiftedDialog System │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ GiftedDialog.vue │ │
│ │ Main Orchestrator │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │
│ │ │ Dialog State │ │ Step Control │ │ API Integration│ │ │
│ │ │ Management │ │ (1 ↔ 2) │ │ & Validation │ │ │
│ │ │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ │ │
│ │ └──────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Step 1: Entity Selection │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────────┐ │ │
│ │ │ EntitySelectionStep.vue │ │ │
│ │ │ Step Controller │ │ │
│ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │
│ │ │ │ Context │ │ Conflict │ │ Dynamic │ │ │ │
│ │ │ │ Awareness │ │ Detection │ │ Labeling │ │ │ │
│ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────────────────────────────────────────┐ │ │
│ │ │ EntityGrid.vue │ │ │
│ │ │ Layout Manager │ │ │
│ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │
│ │ │ │ Responsive │ │ Event │ │ Empty State │ │ │ │
│ │ │ │ Grid Layout │ │ Delegation │ │ Handling │ │ │ │
│ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────────────────────────────────────────┐ │ │
│ │ │ Entity Display Components │ │ │
│ │ │ ┌─────────── ──┐ ┌─────────────┐ ┌─────────────┐ │ │ │
│ │ │ │ PersonCard │ │ProjectCard │ │SpecialEntity│ │ │ │
│ │ │ │ Avatar, Name │ │Icon, Name │ │Card (You, │ │ │ │
│ │ │ │ Selection │ │Issuer Info │ │Unnamed) │ │ │ │
│ │ │ └──────────── ─┘ └─────────────┘ └─────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────────────────────────────────────────┐ │ │
│ │ │ ShowAllCard.vue │ │ │
│ │ │ Navigation Component │ │ │
│ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │
│ │ │ │ Router │ │ Query │ │ Context │ │ │ │
│ │ │ │ Integration │ │ Parameters │ │ Preservation│ │ │ │
│ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Step 2: Gift Details │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────────┐ │ │
│ │ │ GiftDetailsStep.vue │ │ │
│ │ │ Form Controller │ │ │
│ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │
│ │ │ │ Form │ │ Validation │ │ Conflict │ │ │ │
│ │ │ │ Management │ │ & Error │ │ Warning │ │ │ │
│ │ │ │ │ │ Handling │ │ Display │ │ │ │
│ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────────────────────────────────────────────────────────┐ │ │
│ │ │ Form Input Components │ │ │
│ │ │ ┌──────────── ─┐ ┌─────────────┐ ┌─────────────┐ │ │ │
│ │ │ │EntitySummary │ │AmountInput │ │Description │ │ │ │
│ │ │ │Button │ │Increment/ │ │Input │ │ │ │
│ │ │ │Edit Capability│ │Decrement │ │Placeholder │ │ │ │
│ │ │ └─────────── ──┘ └─────────────┘ └─────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ External Dependencies │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ EntityIcon │ │ProjectIcon │ │ Database │ │ Endorser │ │ │
│ │ │ Avatar │ │ Project │ │ Layer │ │ API │ │ │
│ │ │ Renderer │ │ Images │ │ SQLite │ │ Claims │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────────┐ │ │
│ │ │ Vue Router │ │ │
│ │ │ Navigation & Deep Linking │ │ │
│ │ └─────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Data Flow:
┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ User │──▶│ GiftedDialog│──▶│ Step 1 │──▶│ Entity │
│ Interaction │ │ Main │ │ Selection │ │ Selection │
└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Success/ │◀──│ API │◀──│ Step 2 │◀──│ Form │
│ Error │ │ Integration │ │ Details │ │ Submission │
│ Handling │ │ │ │ │ │ │
└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
Component Communication:
┌─────────────────────────────────────────────────────────────────────────────┐
│ Event Flow: entity-selected → update:amount → submit → gift-recorded │
│ │
│ State Flow: Dialog State → Step State → Form State → API State │
│ │
│ Data Flow: Props Down → Events Up → Callbacks → Parent Notification │
└─────────────────────────────────────────────────────────────────────────────┘
```
## Component Hierarchy ## Component Hierarchy
### Main Component ### Main Component
- **GiftedDialog.vue** - Main orchestrating component - **GiftedDialog.vue** - Main orchestrating component
### Step Components ### Step Components
- **EntitySelectionStep.vue** - Step 1 controller - **EntitySelectionStep.vue** - Step 1 controller
- **GiftDetailsStep.vue** - Step 2 controller - **GiftDetailsStep.vue** - Step 2 controller
### Layout Components ### Layout Components
- **EntityGrid.vue** - Unified entity grid layout - **EntityGrid.vue** - Unified entity grid layout
- **EntitySummaryButton.vue** - Selected entity display - **EntitySummaryButton.vue** - Selected entity display
### Display Components ### Display Components
- **PersonCard.vue** - Individual person display - **PersonCard.vue** - Individual person display
- **ProjectCard.vue** - Individual project display - **ProjectCard.vue** - Individual project display
- **SpecialEntityCard.vue** - Special entities (You, Unnamed) - **SpecialEntityCard.vue** - Special entities (You, Unnamed)
- **ShowAllCard.vue** - Navigation component - **ShowAllCard.vue** - Navigation component
### Input Components ### Input Components
- **AmountInput.vue** - Numeric input with controls - **AmountInput.vue** - Numeric input with controls
## Data Flow Diagrams ## Data Flow Diagrams
@ -178,14 +324,21 @@ flowchart TD
**Purpose**: Main orchestrating component that manages the overall dialog state and workflow. **Purpose**: Main orchestrating component that manages the overall dialog state and workflow.
**Key Responsibilities**: **Key Responsibilities**:
- Dialog visibility and lifecycle management - Dialog visibility and lifecycle management
- Step navigation (1 → 2) - Step navigation (1 → 2)
- Entity conflict detection - Entity conflict detection
- API integration for gift submission - API integration for gift submission
- Success/error handling - Success/error handling
- Child component coordination - Child component coordination
**Props**: **Props**:
```typescript ```typescript
interface GiftedDialogProps { interface GiftedDialogProps {
fromProjectId?: string; // Project ID when project is giver fromProjectId?: string; // Project ID when project is giver
@ -196,13 +349,19 @@ interface GiftedDialogProps {
``` ```
**Key Methods**: **Key Methods**:
- `open()` - Initialize and show dialog - `open()` - Initialize and show dialog
- `cancel()` - Close dialog and reset state - `cancel()` - Close dialog and reset state
- `confirm()` - Submit gift and handle response - `confirm()` - Submit gift and handle response
- `handleEntitySelected()` - Process entity selection from step 1 - `handleEntitySelected()` - Process entity selection from step 1
- `handleSubmit()` - Process form submission from step 2 - `handleSubmit()` - Process form submission from step 2
**State Management**: **State Management**:
```typescript ```typescript
interface GiftedDialogState { interface GiftedDialogState {
visible: boolean; visible: boolean;
@ -221,13 +380,19 @@ interface GiftedDialogState {
**Purpose**: Complete step 1 interface for entity selection with dynamic labeling and context awareness. **Purpose**: Complete step 1 interface for entity selection with dynamic labeling and context awareness.
**Key Features**: **Key Features**:
- Dynamic step labeling based on context - Dynamic step labeling based on context
- EntityGrid integration for unified display - EntityGrid integration for unified display
- Conflict detection and prevention - Conflict detection and prevention
- Special entity handling - Special entity handling
- Context preservation for navigation - Context preservation for navigation
**Props**: **Props**:
```typescript ```typescript
interface EntitySelectionStepProps { interface EntitySelectionStepProps {
stepType: 'giver' | 'recipient'; stepType: 'giver' | 'recipient';
@ -248,11 +413,17 @@ interface EntitySelectionStepProps {
``` ```
**Computed Properties**: **Computed Properties**:
- `stepLabel` - Dynamic label based on context - `stepLabel` - Dynamic label based on context
- `shouldShowProjects` - Whether to show projects vs people - `shouldShowProjects` - Whether to show projects vs people
- `shouldShowYouEntity` - Whether to show "You" option - `shouldShowYouEntity` - Whether to show "You" option
- `youSelectable` - Whether "You" can be selected - `youSelectable` - Whether "You" can be selected
- `showAllRoute` - Navigation route for "Show All" - `showAllRoute` - Navigation route for "Show All"
- `showAllQueryParams` - Query parameters for navigation - `showAllQueryParams` - Query parameters for navigation
### 3. GiftDetailsStep.vue ### 3. GiftDetailsStep.vue
@ -260,14 +431,21 @@ interface EntitySelectionStepProps {
**Purpose**: Complete step 2 interface for gift details with form validation and entity summaries. **Purpose**: Complete step 2 interface for gift details with form validation and entity summaries.
**Key Features**: **Key Features**:
- Entity summary display with edit capability - Entity summary display with edit capability
- Gift description input with placeholder support - Gift description input with placeholder support
- Amount input with increment/decrement controls - Amount input with increment/decrement controls
- Unit code selection (HUR, USD, BTC, etc.) - Unit code selection (HUR, USD, BTC, etc.)
- Conflict detection and warning display - Conflict detection and warning display
- Form validation and submission - Form validation and submission
**Props**: **Props**:
```typescript ```typescript
interface GiftDetailsStepProps { interface GiftDetailsStepProps {
giver: EntityData | null; giver: EntityData | null;
@ -287,6 +465,7 @@ interface GiftDetailsStepProps {
``` ```
**Local State**: **Local State**:
```typescript ```typescript
interface GiftDetailsLocalState { interface GiftDetailsLocalState {
localDescription: string; localDescription: string;
@ -300,14 +479,21 @@ interface GiftDetailsLocalState {
**Purpose**: Unified grid layout for displaying people, projects, and special entities with responsive design. **Purpose**: Unified grid layout for displaying people, projects, and special entities with responsive design.
**Key Features**: **Key Features**:
- Responsive grid layout (3-6 columns based on entity type) - Responsive grid layout (3-6 columns based on entity type)
- Special entity integration (You, Unnamed) - Special entity integration (You, Unnamed)
- Conflict detection integration - Conflict detection integration
- Empty state messaging - Empty state messaging
- Show All navigation - Show All navigation
- Event delegation for entity selection - Event delegation for entity selection
**Props**: **Props**:
```typescript ```typescript
interface EntityGridProps { interface EntityGridProps {
entityType: 'people' | 'projects'; entityType: 'people' | 'projects';
@ -325,6 +511,7 @@ interface EntityGridProps {
``` ```
**Grid Layout**: **Grid Layout**:
- **People**: 4-6 columns (responsive) - **People**: 4-6 columns (responsive)
- **Projects**: 3-4 columns (responsive) - **Projects**: 3-4 columns (responsive)
- **Special entities**: Always shown for people grids - **Special entities**: Always shown for people grids
@ -335,13 +522,19 @@ interface EntityGridProps {
**Purpose**: Individual person display with avatar, name, and selection states. **Purpose**: Individual person display with avatar, name, and selection states.
**Key Features**: **Key Features**:
- EntityIcon integration for avatar display - EntityIcon integration for avatar display
- Conflict state visualization - Conflict state visualization
- Time icon display for activity context - Time icon display for activity context
- Hover and selection states - Hover and selection states
- Accessibility support - Accessibility support
**Props**: **Props**:
```typescript ```typescript
interface PersonCardProps { interface PersonCardProps {
person: Contact; person: Contact;
@ -351,9 +544,13 @@ interface PersonCardProps {
``` ```
**Visual States**: **Visual States**:
- **Normal**: Default appearance - **Normal**: Default appearance
- **Conflicted**: Red border, disabled state - **Conflicted**: Red border, disabled state
- **Hovered**: Elevated appearance - **Hovered**: Elevated appearance
- **Selected**: Highlighted border - **Selected**: Highlighted border
### 6. ProjectCard.vue ### 6. ProjectCard.vue
@ -361,10 +558,15 @@ interface PersonCardProps {
**Purpose**: Individual project display with project icon, name, and issuer information. **Purpose**: Individual project display with project icon, name, and issuer information.
**Key Features**: **Key Features**:
- ProjectIcon integration for project images - ProjectIcon integration for project images
- Issuer information display - Issuer information display
- Project name with ellipsis overflow - Project name with ellipsis overflow
- Selection state management - Selection state management
- Accessibility support - Accessibility support
**Props**: **Props**:
@ -378,9 +580,13 @@ interface ProjectCardProps {
``` ```
**Display Elements**: **Display Elements**:
- Project icon/image - Project icon/image
- Project name (truncated) - Project name (truncated)
- Issuer information - Issuer information
- Selection indicator - Selection indicator
### 7. SpecialEntityCard.vue ### 7. SpecialEntityCard.vue
@ -388,10 +594,15 @@ interface ProjectCardProps {
**Purpose**: Special entity display for "You" and "Unnamed" with conflict detection. **Purpose**: Special entity display for "You" and "Unnamed" with conflict detection.
**Key Features**: **Key Features**:
- FontAwesome icon integration - FontAwesome icon integration
- Conflict state handling - Conflict state handling
- Conditional selectability - Conditional selectability
- Consistent styling with other cards - Consistent styling with other cards
- Accessibility support - Accessibility support
**Props**: **Props**:
@ -407,7 +618,9 @@ interface SpecialEntityCardProps {
``` ```
**Entity Types**: **Entity Types**:
- **You**: Represents the current user - **You**: Represents the current user
- **Unnamed**: Represents anonymous giver - **Unnamed**: Represents anonymous giver
### 8. ShowAllCard.vue ### 8. ShowAllCard.vue
@ -415,10 +628,15 @@ interface SpecialEntityCardProps {
**Purpose**: Navigation component for "Show All" functionality with router integration. **Purpose**: Navigation component for "Show All" functionality with router integration.
**Key Features**: **Key Features**:
- Vue Router integration - Vue Router integration
- Query parameter passing - Query parameter passing
- Context preservation - Context preservation
- Consistent styling - Consistent styling
- Icon-based navigation - Icon-based navigation
**Props**: **Props**:
@ -431,8 +649,11 @@ interface ShowAllCardProps {
``` ```
**Navigation Logic**: **Navigation Logic**:
- People → ContactGiftingView with context - People → ContactGiftingView with context
- Projects → DiscoverView - Projects → DiscoverView
- Query parameters preserve dialog state - Query parameters preserve dialog state
### 9. EntitySummaryButton.vue ### 9. EntitySummaryButton.vue
@ -440,10 +661,15 @@ interface ShowAllCardProps {
**Purpose**: Selected entity display with edit capability for step 2. **Purpose**: Selected entity display with edit capability for step 2.
**Key Features**: **Key Features**:
- EntityIcon/ProjectIcon integration - EntityIcon/ProjectIcon integration
- Edit button functionality - Edit button functionality
- Entity type detection - Entity type detection
- Consistent styling - Consistent styling
- Accessibility support - Accessibility support
**Props**: **Props**:
@ -457,9 +683,13 @@ interface EntitySummaryButtonProps {
``` ```
**Display Elements**: **Display Elements**:
- Entity icon/avatar - Entity icon/avatar
- Entity name - Entity name
- Edit button (when editable) - Edit button (when editable)
- Type-specific styling - Type-specific styling
### 10. AmountInput.vue ### 10. AmountInput.vue
@ -467,10 +697,15 @@ interface EntitySummaryButtonProps {
**Purpose**: Specialized numeric input with increment/decrement controls and validation. **Purpose**: Specialized numeric input with increment/decrement controls and validation.
**Key Features**: **Key Features**:
- Increment/decrement buttons - Increment/decrement buttons
- Configurable min/max values and step size - Configurable min/max values and step size
- Input validation and formatting - Input validation and formatting
- Disabled state handling for boundary values - Disabled state handling for boundary values
- v-model compatibility - v-model compatibility
**Props**: **Props**:
@ -485,15 +720,23 @@ interface AmountInputProps {
``` ```
**Key Methods**: **Key Methods**:
- `increment()` - Increase value by step - `increment()` - Increase value by step
- `decrement()` - Decrease value by step - `decrement()` - Decrease value by step
- `handleInput()` - Process direct input - `handleInput()` - Process direct input
- `handleBlur()` - Validate on blur - `handleBlur()` - Validate on blur
**Validation Logic**: **Validation Logic**:
- Minimum/maximum bounds checking - Minimum/maximum bounds checking
- Step size validation - Step size validation
- Numeric input sanitization - Numeric input sanitization
- Real-time feedback - Real-time feedback
## Integration Patterns ## Integration Patterns
@ -1015,9 +1258,13 @@ test('Gift recording workflow', async ({ page }) => {
### Optimization Strategies ### Optimization Strategies
1. **Lazy Loading**: Components are loaded only when needed 1. **Lazy Loading**: Components are loaded only when needed
2. **Virtual Scrolling**: For large entity lists 2. **Virtual Scrolling**: For large entity lists
3. **Debounced Input**: Amount input changes are debounced 3. **Debounced Input**: Amount input changes are debounced
4. **Computed Properties**: Efficient reactive calculations 4. **Computed Properties**: Efficient reactive calculations
5. **Event Delegation**: Minimal event listeners 5. **Event Delegation**: Minimal event listeners
### Memory Management ### Memory Management
@ -1040,8 +1287,11 @@ export default class GiftedDialog extends Vue {
### Bundle Size Optimization ### Bundle Size Optimization
- Tree-shaking for unused FontAwesome icons - Tree-shaking for unused FontAwesome icons
- Dynamic imports for heavy components - Dynamic imports for heavy components
- Shared dependencies between components - Shared dependencies between components
- Minimal external dependencies - Minimal external dependencies
## Accessibility Features ## Accessibility Features
@ -1049,8 +1299,11 @@ export default class GiftedDialog extends Vue {
### Keyboard Navigation ### Keyboard Navigation
- Tab order follows visual flow - Tab order follows visual flow
- Enter/Space for button activation - Enter/Space for button activation
- Escape to close dialog - Escape to close dialog
- Arrow keys for amount input - Arrow keys for amount input
### Screen Reader Support ### Screen Reader Support

Loading…
Cancel
Save