feat: comprehensive editor UX refinement with collapsible sections and data loss prevention
Major improvements to Object Editor, Table Editor, and Invoice Editor: ## UX Enhancements: - Made export sections collapsible across all editors to reduce page height - Added comprehensive, collapsible usage tips with eye-catching design - Implemented consistent input method patterns (file auto-load, inline URL buttons) - Paste sections now collapse after successful parsing with data summaries ## Data Loss Prevention: - Added confirmation modals when switching input methods with existing data - Amber-themed warning design with specific data summaries - Suggests saving before proceeding with destructive actions - Prevents accidental data loss across all editor tools ## Consistency Improvements: - Standardized file input styling with 'tool-input' class - URL fetch buttons now inline (not below input) across all editors - Parse buttons positioned consistently on bottom-right - Auto-load behavior for file inputs matching across editors ## Bug Fixes: - Fixed Table Editor cell text overflow with proper truncation - Fixed Object Editor file input to auto-load content - Removed unnecessary parse buttons and checkboxes - Fixed Invoice Editor URL form layout ## Documentation: - Created EDITOR_TOOL_GUIDE.md with comprehensive patterns - Created EDITOR_CHECKLIST.md for quick reference - Created PROJECT_ROADMAP.md with future plans - Created TODO.md with detailed task lists - Documented data loss prevention patterns - Added code examples and best practices All editors now follow consistent UX patterns with improved user experience and data protection.
This commit is contained in:
dwindown
226
EDITOR_CHECKLIST.md
Normal file
226
EDITOR_CHECKLIST.md
Normal file
@@ -0,0 +1,226 @@
|
||||
# Editor Tool Consistency Checklist
|
||||
|
||||
Quick reference for ensuring your new editor tool follows all consistency patterns.
|
||||
|
||||
## ✅ Input Section
|
||||
|
||||
### Tab Structure
|
||||
- [ ] 4 tabs: Create New, URL, Paste, Open
|
||||
- [ ] Icons: Plus, Globe, FileText, Upload
|
||||
- [ ] Active tab styling: `bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-b-2 border-blue-500`
|
||||
|
||||
### Create New Tab
|
||||
- [ ] Grid layout with 2 buttons (Start Empty, Load Sample)
|
||||
- [ ] Dashed border buttons with icons
|
||||
- [ ] Blue tip box at bottom
|
||||
|
||||
### URL Tab ⚠️ CRITICAL
|
||||
- [ ] `<div className="flex gap-2">` wrapper
|
||||
- [ ] Input in `<div className="relative flex-1">`
|
||||
- [ ] Button INLINE on the right (not below!)
|
||||
- [ ] Button text: "Fetch Data" or "Fetching..."
|
||||
- [ ] Enter key triggers fetch
|
||||
- [ ] Helper text below
|
||||
|
||||
### Paste Tab
|
||||
- [ ] CodeMirrorEditor component
|
||||
- [ ] Collapse after successful parse
|
||||
- [ ] Collapsed state shows summary with "Edit Input ▼" button
|
||||
- [ ] Error display in red box
|
||||
- [ ] Parse button on bottom-right
|
||||
- [ ] Button disabled when invalid
|
||||
|
||||
### Open Tab ⚠️ CRITICAL
|
||||
- [ ] `<input className="tool-input" />` (not custom styling!)
|
||||
- [ ] Auto-load on file selection (no button needed!)
|
||||
- [ ] Green privacy notice below
|
||||
|
||||
---
|
||||
|
||||
## ✅ Main Editor Section
|
||||
|
||||
- [ ] Conditional render: `{(activeTab !== 'create' || createNewCompleted) && ...}`
|
||||
- [ ] White card with border
|
||||
- [ ] Header with icon and title
|
||||
- [ ] Content area with padding
|
||||
|
||||
### Fullscreen (Optional)
|
||||
- [ ] `z-[99999]` when fullscreen
|
||||
- [ ] `!m-0` and `marginTop: "0 !important"` to override spacing
|
||||
|
||||
---
|
||||
|
||||
## ✅ Export Section
|
||||
|
||||
- [ ] Collapsible by default (`exportExpanded` state)
|
||||
- [ ] Clickable header with hover effect
|
||||
- [ ] ChevronUp/ChevronDown icons
|
||||
- [ ] Summary info in header
|
||||
- [ ] Content only renders when expanded
|
||||
|
||||
---
|
||||
|
||||
## ✅ Usage Tips
|
||||
|
||||
- [ ] Collapsible by default (`usageTipsExpanded` state)
|
||||
- [ ] Header: "💡 Usage Tips"
|
||||
- [ ] Clickable header with hover effect
|
||||
- [ ] ChevronUp/ChevronDown icons
|
||||
- [ ] Organized by categories:
|
||||
- [ ] 📝 Input Methods
|
||||
- [ ] ✏️ Editing Features (editor-specific)
|
||||
- [ ] 📤 Export Options
|
||||
- [ ] 💾 Data Privacy
|
||||
|
||||
---
|
||||
|
||||
## ✅ Data Loss Prevention (CRITICAL!)
|
||||
|
||||
### Confirmation Modal
|
||||
- [ ] Shows when user has data and tries to switch tabs
|
||||
- [ ] Shows when user clicks Start Empty/Load Sample with existing data
|
||||
- [ ] Amber header with AlertTriangle icon
|
||||
- [ ] Lists specific data user will lose (not generic)
|
||||
- [ ] Blue tip box suggesting to save first
|
||||
- [ ] "Cancel" button (gray)
|
||||
- [ ] "Switch & Clear Data" button (amber with icon)
|
||||
- [ ] z-50 to appear above everything
|
||||
|
||||
### Logic
|
||||
- [ ] `hasUserData()` function implemented
|
||||
- [ ] `hasModifiedData()` function implemented
|
||||
- [ ] `handleTabChange()` checks for data before switching
|
||||
- [ ] `showInputChangeModal` state variable
|
||||
- [ ] `pendingTabChange` state variable
|
||||
- [ ] Modal component created as separate component
|
||||
- [ ] `onConfirm` clears data and switches tab
|
||||
- [ ] `onCancel` closes modal without action
|
||||
|
||||
---
|
||||
|
||||
## ✅ State Variables
|
||||
|
||||
```jsx
|
||||
// Required states
|
||||
const [activeTab, setActiveTab] = useState('create');
|
||||
const [createNewCompleted, setCreateNewCompleted] = useState(false);
|
||||
const [inputText, setInputText] = useState('');
|
||||
const [url, setUrl] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [pasteCollapsed, setPasteCollapsed] = useState(false);
|
||||
const [pasteDataSummary, setPasteDataSummary] = useState(null);
|
||||
const [exportExpanded, setExportExpanded] = useState(false);
|
||||
const [usageTipsExpanded, setUsageTipsExpanded] = useState(false);
|
||||
const [showInputChangeModal, setShowInputChangeModal] = useState(false);
|
||||
const [pendingTabChange, setPendingTabChange] = useState(null);
|
||||
const fileInputRef = useRef(null);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Error Handling
|
||||
|
||||
- [ ] Parse errors keep input expanded
|
||||
- [ ] Parse errors show in red box with AlertTriangle icon
|
||||
- [ ] Valid data collapses input and shows editor
|
||||
- [ ] Error state: `setPasteCollapsed(false)`
|
||||
- [ ] Success state: `setPasteCollapsed(true)`
|
||||
|
||||
---
|
||||
|
||||
## ✅ Imports
|
||||
|
||||
```jsx
|
||||
import {
|
||||
Plus, Globe, FileText, Upload, // Input tabs
|
||||
Download, Edit3, // Editor/Export
|
||||
AlertTriangle, // Errors
|
||||
ChevronUp, ChevronDown, // Collapse indicators
|
||||
} from 'lucide-react';
|
||||
|
||||
import ToolLayout from '../components/ToolLayout';
|
||||
import CodeMirrorEditor from '../components/CodeMirrorEditor';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Visual Consistency
|
||||
|
||||
### Colors
|
||||
- [ ] Primary action: `bg-blue-600 hover:bg-blue-700`
|
||||
- [ ] Disabled: `disabled:bg-gray-400`
|
||||
- [ ] Success: `bg-green-50 dark:bg-green-900/20`
|
||||
- [ ] Error: `bg-red-50 dark:bg-red-900/20`
|
||||
- [ ] Info: `bg-blue-50 dark:bg-blue-900/20`
|
||||
|
||||
### Spacing
|
||||
- [ ] Section spacing: `mt-6`
|
||||
- [ ] Internal spacing: `space-y-3`
|
||||
- [ ] Padding: `p-4` or `px-4 py-3`
|
||||
|
||||
### Typography
|
||||
- [ ] Headers: `text-lg font-semibold`
|
||||
- [ ] Body: `text-sm`
|
||||
- [ ] Helper text: `text-xs`
|
||||
|
||||
---
|
||||
|
||||
## ✅ Behavior
|
||||
|
||||
- [ ] Tab change confirmation when data exists
|
||||
- [ ] File input auto-loads (no button)
|
||||
- [ ] Paste requires button click
|
||||
- [ ] URL supports Enter key
|
||||
- [ ] Collapsible sections start collapsed
|
||||
- [ ] Error messages are specific and helpful
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Common Mistakes to Avoid
|
||||
|
||||
1. ❌ URL button below input → ✅ Button inline on right
|
||||
2. ❌ Custom file input styling → ✅ Use `tool-input` class
|
||||
3. ❌ File input with parse button → ✅ Auto-load on selection
|
||||
4. ❌ Always-visible usage tips → ✅ Collapsible by default
|
||||
5. ❌ Always-visible export → ✅ Collapsible by default
|
||||
6. ❌ Parse button on left → ✅ Parse button on right
|
||||
7. ❌ No error handling → ✅ Show errors, keep input expanded
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Checklist
|
||||
|
||||
- [ ] Create New: Both buttons work
|
||||
- [ ] URL: Inline button, Enter key works
|
||||
- [ ] Paste: Valid data collapses, invalid shows error
|
||||
- [ ] Open: Auto-loads file
|
||||
- [ ] Export: Collapses/expands correctly
|
||||
- [ ] Usage Tips: Collapses/expands correctly
|
||||
- [ ] Tab switching: Confirmation modal works
|
||||
- [ ] Dark mode: All colors work
|
||||
- [ ] Mobile: Responsive layout
|
||||
- [ ] Errors: Specific messages, input stays expanded
|
||||
|
||||
---
|
||||
|
||||
## 📚 Reference Examples
|
||||
|
||||
- **Object Editor**: `/src/pages/ObjectEditor.js`
|
||||
- **Table Editor**: `/src/pages/TableEditor.js`
|
||||
- **Invoice Editor**: `/src/pages/InvoiceEditor.js`
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
1. Copy structure from existing editor
|
||||
2. Replace editor-specific logic
|
||||
3. Update Usage Tips content
|
||||
4. Test all input methods
|
||||
5. Test collapse/expand behavior
|
||||
6. Test error handling
|
||||
7. Test dark mode
|
||||
8. Test mobile view
|
||||
|
||||
**Follow this checklist and your editor will be perfectly consistent!** ✅
|
||||
Reference in New Issue
Block a user