dev day #80

2026-06-04 02:32:57 +00:00 · 2025-11-02 21:31:00 +01:00
parent b9cea0cd77
commit 087f30e82c
130 changed files with 20104 additions and 34330 deletions
@@ -0,0 +1,239 @@
+# 📦 Installation Guide - MyUIbrix Elementor Features
+
+## Quick Setup
+
+### Step 1: Install Frontend Dependencies
+
+```bash
+cd frontend
+npm install react-markdown react-syntax-highlighter
+npm install --save-dev @types/react-syntax-highlighter
+```
+
+### Step 2: Backend Routes Setup
+
+Add to your `main.go`:
+
+```go
+import "your-app/internal/controllers"
+
+// Setup documentation routes
+docsController := controllers.NewDocsController("./DOCS")
+adminDocs := router.Group("/api/v1/admin/docs")
+adminDocs.Use(middleware.RequireAuth())
+adminDocs.Use(middleware.RequireAdmin())
+{
+    adminDocs.GET("/file/*filepath", docsController.GetDocFile)
+    adminDocs.GET("/list", docsController.ListDocFiles)
+    adminDocs.GET("/search", docsController.SearchDocs)
+}
+```
+
+### Step 3: Add Admin Route
+
+In your admin routes file (e.g., `frontend/src/App.tsx`):
+
+```tsx
+import DevDocsPage from './pages/admin/DevDocsPage';
+
+// Add route
+<Route path="/admin/docs" element={<DevDocsPage />} />
+```
+
+### Step 4: Add Navigation Link
+
+In your admin navigation component:
+
+```tsx
+import { FiBook } from 'react-icons/fi';
+
+<NavLink to="/admin/docs">
+  <HStack>
+    <Icon as={FiBook} />
+    <Text>Developer Docs</Text>
+  </HStack>
+</NavLink>
+```
+
+### Step 5: Verify Files
+
+Ensure all these files exist:
+- ✅ `frontend/src/components/editor/InlineTextEditor.tsx`
+- ✅ `frontend/src/components/editor/CustomCSSEditor.tsx`
+- ✅ `frontend/src/components/editor/ColumnLayoutManager.tsx`
+- ✅ `frontend/src/components/editor/ContextualAdminLinks.tsx`
+- ✅ `frontend/src/components/editor/VisualStylePanel.tsx` (enhanced)
+- ✅ `frontend/src/pages/admin/DevDocsPage.tsx`
+- ✅ `internal/controllers/docs_controller.go`
+- ✅ All `.md` files in `/DOCS`
+
+---
+
+## Testing
+
+### Test Documentation Viewer
+
+1. Navigate to `/admin/docs`
+2. Should see list of documentation files
+3. Click any document to view
+4. Test search functionality
+5. Try downloading a document
+
+### Test Elementor Features
+
+1. Go to any page (e.g., homepage)
+2. Add `?myuibrix=edit` to URL
+3. Click edit button (bottom left)
+4. Select any element
+5. Test all 5 tabs:
+   - Content
+   - Style
+   - Layout
+   - CSS
+   - Admin
+
+### Test Inline Editor
+
+1. In edit mode, click any text
+2. Toolbar should appear
+3. Test Bold, Italic, Underline
+4. Test link insertion
+5. Changes should auto-save
+
+### Test Column Layouts
+
+1. Select element
+2. Open Layout tab
+3. Choose a template
+4. Element should split into columns
+5. Save and reload to verify persistence
+
+### Test Custom CSS
+
+1. Select element
+2. Open CSS tab
+3. Write custom CSS
+4. Enable preview
+5. Apply and save
+
+---
+
+## Troubleshooting
+
+### "Module not found" errors
+
+**Solution**: Install missing dependencies
+```bash
+npm install react-markdown react-syntax-highlighter
+npm install --save-dev @types/react-syntax-highlighter
+```
+
+### Documentation viewer shows "Document Not Found"
+
+**Solution**: Check backend routes are configured and DOCS folder is accessible
+
+### Custom CSS not applying
+
+**Solution**: 
+- Check for syntax errors
+- Enable preview mode first
+- Verify CSS is valid
+- Check browser console for errors
+
+### Inline editor not appearing
+
+**Solution**:
+- Ensure element has proper `data-element` attribute
+- Check if edit mode is active
+- Verify admin permissions
+
+---
+
+## Configuration
+
+### Environment Variables
+
+No additional environment variables needed.
+
+### Database
+
+No database migrations required for these features.
+
+### Permissions
+
+All features require admin authentication.
+
+---
+
+## Deployment
+
+### Development
+
+```bash
+# Frontend
+cd frontend
+npm run dev
+
+# Backend
+go run main.go
+```
+
+### Production
+
+```bash
+# Frontend
+cd frontend
+npm run build
+
+# Backend
+go build -o app main.go
+./app
+```
+
+### Docker
+
+If using Docker, ensure DOCS folder is included:
+
+```dockerfile
+COPY DOCS /app/DOCS
+```
+
+---
+
+## Uninstallation
+
+To remove these features:
+
+1. Remove frontend components:
+   ```bash
+   rm frontend/src/components/editor/InlineTextEditor.tsx
+   rm frontend/src/components/editor/CustomCSSEditor.tsx
+   rm frontend/src/components/editor/ColumnLayoutManager.tsx
+   rm frontend/src/components/editor/ContextualAdminLinks.tsx
+   rm frontend/src/pages/admin/DevDocsPage.tsx
+   ```
+
+2. Remove backend controller:
+   ```bash
+   rm internal/controllers/docs_controller.go
+   ```
+
+3. Remove routes from `main.go`
+
+4. Remove navigation link
+
+5. Revert `VisualStylePanel.tsx` changes
+
+---
+
+## Support
+
+For issues:
+1. Check `/admin/docs` for documentation
+2. Review `COMPLETE_IMPLEMENTATION_SUMMARY.md`
+3. Check browser console for errors
+4. Verify all dependencies installed
+
+---
+
+**Status**: ✅ Ready for Installation