dev day #62

DOCS/MYUIBRIX_FIXES.md

@@ -0,0 +1,175 @@
+# MyUIbrix Editor Fixes - December 2024
+
+## Issues Fixed
+
+### 1. ✅ Element Picker Shows Only Implemented Elements
+**Problem**: The element picker was showing ALL available element types (30+), but only a subset were actually implemented on the HomePage.
+
+**Solution**: 
+- Created `HOMEPAGE_IMPLEMENTED_ELEMENTS` array in `defaultElements.ts` listing only implemented elements
+- Updated MyUIbrixEditor to filter `PREDEFINED_ELEMENTS` by what's actually available on the current page
+- Now only shows: hero, news, matches, table, team, videos, merch, newsletter, sponsors, banner
+
+### 2. ✅ Live Preview Now Works
+**Problem**: Changing variants and visibility in the editor didn't show changes in real-time. You had to save and reload to see effects.
+
+**Solution**:
+- Integrated `useAllPageElementConfigs` hook into HomePage component
+- Hook listens to `myuibrix-change` events and updates visibility/variant state in real-time
+- All sections now use `isVisible('elementName', defaultValue)` to control rendering
+- Variant changes use `getVariant('elementName', fallback)` to switch between styles
+
+### 3. ✅ All Sections Have data-element Attributes
+**Problem**: Some sections were missing `data-element` attributes, so the editor couldn't highlight or edit them.
+
+**Solution**:
+- Added `data-element` attributes to all major sections:
+  - `hero` - Main hero section (grid/scroller/swiper variants)
+  - `news` - Featured news articles
+  - `matches` - Upcoming matches display
+  - `table` - League standings table
+  - `team` - Players scroller
+  - `videos` - Videos section
+  - `merch` - Merchandise/fanshop
+  - `newsletter` - Newsletter subscription
+  - `sponsors` - Sponsors/partners
+  - `banner` - Advertisement banners
+
+### 4. ✅ Visibility Controls Work
+**Problem**: Hiding/showing elements didn't work at all.
+
+**Solution**:
+- All sections now wrapped with `isVisible()` checks
+- Changes in the editor immediately toggle visibility
+- Default visibility set appropriately (hero=true, videos=false, etc.)
+
+## How It Works Now
+
+### For Admins (Editing Mode)
+
+1. **Activate Editor**: Click the floating edit button (bottom left)
+2. **Select Element**: Click on any section to select it
+3. **Change Style**: Pick from available style variants for that element
+4. **Move Elements**: Use up/down arrows to reorder sections
+5. **Hide/Show**: Toggle element visibility in the layers panel
+6. **Preview**: Changes appear IMMEDIATELY (live preview mode)
+7. **Save**: Click "Publikovat" to save changes permanently
+
+### Technical Details
+
+**Live Preview Architecture**:
+```
+MyUIbrixEditor (editing) 
+  → Dispatches 'myuibrix-change' event
+  → useAllPageElementConfigs hook listens
+  → Updates getVariant() & isVisible() functions
+  → HomePage re-renders with new configuration
+```
+
+**Only Editing User Sees Changes**:
+- Preview mode is indicated by `previewMode: true` in events
+- Changes only apply in browser memory during editing
+- Other users see the published version until you click "Publikovat"
+
+## Element Variants Available
+
+### Hero Section
+- `grid` - Grid layout with featured article
+- `scroller` - Horizontal scrolling cards
+- `swiper` - Carousel/swiper
+- `swiper_full` - Full-width carousel
+
+### Matches
+- `compact` - Compact next match display
+- `compact_split` - Split layout with multiple matches
+
+### Table
+- `split_news` - News + table side-by-side (default)
+- `standard` - Table only
+
+### Sponsors
+- `grid` - Grid layout
+- `slider` - Animated slider
+
+### Videos, Team, News, etc.
+- See `ELEMENT_VARIANTS` in `pageElements.ts` for full list
+
+## Default Configuration
+
+New installations use these defaults (from `defaultElements.ts`):
+- Hero (grid) - Visible
+- News (grid) - Visible  
+- Matches (compact) - Visible
+- Table (split_news) - Visible
+- Merch (grid) - Visible
+- Sponsors (grid) - Visible
+- Videos - **Hidden** (must enable)
+- Team - **Hidden** (must enable)
+- Newsletter - **Hidden** (must enable)
+- Banner - **Hidden** (must enable)
+
+## ✅ NEW: Drag-and-Drop Reordering (Just Added!)
+
+### Visual Reordering Works
+- **Up/Down arrows** now visually reorder sections immediately
+- **Drag-and-drop** support in layers panel - grab any element and drag it
+- Changes apply in real-time (live preview)
+- DOM elements are physically reordered to match your layout
+
+### How to Reorder
+
+**Method 1: Arrow Buttons**
+1. Click on an element to select it
+2. Use ↑ ↓ arrows in the contextual panel or layers panel
+3. Section moves immediately
+
+**Method 2: Drag and Drop (Recommended)**
+1. Open Layers Panel (L key or layers button)
+2. Grab the drag handle (⋮⋮ icon) or any layer item
+3. Drag to desired position
+4. Drop - section reorders instantly!
+
+### Visual Feedback
+- **Dragging**: Item becomes semi-transparent with "grabbing" cursor
+- **Drop target**: Highlighted in blue with scale effect
+- **Grip handle**: Shows ⋮⋮ icon to indicate draggability
+- **Position label**: Shows "Position 1 of 10" etc.
+
+### Some Variants Not Fully Styled
+- Not all variant options have complete styling
+- Most common variants (grid, compact, standard) work well
+- Exotic variants may need CSS work
+
+## Testing Checklist
+
+After deployment, test these scenarios:
+
+- [ ] Click edit button → editor UI appears
+- [ ] Click on hero section → style picker appears
+- [ ] Change hero from "grid" to "scroller" → updates immediately
+- [ ] Hide "sponsors" section → disappears immediately
+- [ ] Show "videos" section → appears immediately
+- [ ] **NEW**: Click ↑ arrow on "matches" → moves up visually
+- [ ] **NEW**: Open layers panel (L) → see all sections with drag handles
+- [ ] **NEW**: Drag "newsletter" above "sponsors" → reorders immediately
+- [ ] **NEW**: Drag "hero" to bottom → entire page reorders
+- [ ] Open element picker (+ button) → only shows 10 implemented elements
+- [ ] Save changes (Publikovat) → page reloads with saved state
+- [ ] **NEW**: Reload page → sections appear in saved order
+- [ ] Open page in incognito → sees published version (not draft)
+
+## Files Modified
+
+1. **defaultElements.ts** - Added `HOMEPAGE_IMPLEMENTED_ELEMENTS` list
+2. **MyUIbrixEditor.tsx** - Filter element picker, add overlays, **drag-drop handlers**, **visual reordering**
+3. **HomePage.tsx** - Integrated `useAllPageElementConfigs` hook, added visibility controls
+4. **usePageElementConfig.ts** - Added **DOM reordering**, **element order state**, initial order application
+
+## Migration Notes
+
+**Existing Sites**: No data migration needed. The system will:
+1. Load existing configurations from database
+2. Fall back to defaults for missing elements
+3. Mark as "hasChanges" if using defaults (so admin can save)
+
+**New Sites**: Defaults are applied automatically on first page load.