docs: update all documentation and add AI tooling configs
- Rewrite README.md with current architecture, features and stack - Update docs/API.md with all current endpoints (corporate, BI, client 360) - Update docs/ARCHITECTURE.md with cache, modular queries, services, ETL - Update docs/GUIA-USUARIO.md for all roles (admin, corporate, agente) - Add docs/INDEX.md documentation index - Add PROJETO.md comprehensive project reference - Add BI-CCC-Implementation-Guide.md - Include AI agent configs (.claude, .agents, .gemini, _bmad) - Add netbird VPN configuration - Add status report Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,189 @@
|
||||
# Dev Mode - Usage Guide
|
||||
|
||||
**Purpose**: Easy feedback on prototypes by copying Object IDs to clipboard
|
||||
|
||||
---
|
||||
|
||||
## 🎯 What is Dev Mode?
|
||||
|
||||
Dev Mode is a built-in feature in all WDS prototypes that allows testers, stakeholders, and designers to easily reference specific UI elements when providing feedback.
|
||||
|
||||
Instead of saying *"The button in the top right"*, you can say *"Fix `customer-sign-bankid`"* - precise and unambiguous!
|
||||
|
||||
---
|
||||
|
||||
## 🚀 How to Use
|
||||
|
||||
### Step 1: Activate Dev Mode
|
||||
|
||||
**Two ways**:
|
||||
1. Click the **Dev Mode button** (top-right corner)
|
||||
2. Press **Ctrl+E** on your keyboard
|
||||
|
||||
The button will turn blue and say **"Dev Mode: ON"**
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Find the Element
|
||||
|
||||
- **Hover** over any element you want to reference
|
||||
- You'll see a **gray outline** appear
|
||||
- A **tooltip** shows the Object ID
|
||||
|
||||
**Prototype still works normally!** You can click buttons, fill forms, etc.
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Copy the Object ID
|
||||
|
||||
- **Hold the Shift key** (outline turns **green**)
|
||||
- **Click the element** while holding Shift
|
||||
- **Object ID is copied!** ✓
|
||||
|
||||
You'll see a green success message: **"✓ Copied: [object-id]"**
|
||||
|
||||
**Important**: Shift key is **disabled when typing in form fields** (input, textarea, etc.) so you can type capital letters and special characters normally!
|
||||
|
||||
---
|
||||
|
||||
### Step 4: Paste in Feedback
|
||||
|
||||
Now paste the Object ID in your feedback:
|
||||
|
||||
**Good feedback**:
|
||||
```
|
||||
❌ Issue with `customer-sign-bankid`:
|
||||
The button is disabled even after I check the consent checkbox.
|
||||
|
||||
💡 Suggestion for `sidebar-video`:
|
||||
Make the video auto-play on mobile.
|
||||
```
|
||||
|
||||
**Developer knows EXACTLY** which element you're talking about!
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Visual Guide
|
||||
|
||||
| State | Appearance | Action |
|
||||
|-------|------------|--------|
|
||||
| **Dev Mode OFF** | Normal prototype | Click button or press Ctrl+E |
|
||||
| **Dev Mode ON (hovering)** | Gray outline | Shows Object ID in tooltip |
|
||||
| **Shift held (hovering)** | Green outline | Click to copy |
|
||||
| **After copying** | Green flash | Object ID in clipboard |
|
||||
|
||||
---
|
||||
|
||||
## ⌨️ Keyboard Shortcuts
|
||||
|
||||
- **Ctrl+E**: Toggle Dev Mode on/off
|
||||
- **Shift + Click**: Copy Object ID (when dev mode is on)
|
||||
|
||||
---
|
||||
|
||||
## 💡 Tips
|
||||
|
||||
1. **Activate once**, then navigate through prototype normally
|
||||
2. **Hold Shift only when copying** - prototype works without it
|
||||
3. **Type in fields normally** - Shift is disabled when focused on input/textarea
|
||||
4. **Deactivate when done** testing (Ctrl+E again)
|
||||
5. **Object IDs are permanent** - always refer to the same element
|
||||
|
||||
---
|
||||
|
||||
## 📋 Example Workflow
|
||||
|
||||
### Tester's Perspective:
|
||||
|
||||
1. Open prototype
|
||||
2. Press **Ctrl+E** (Dev Mode on)
|
||||
3. Test the prototype normally
|
||||
4. Find a bug - hover over problem element
|
||||
5. Hold **Shift**, click element
|
||||
6. Paste Object ID into bug report: "`customer-facility-startdate-group` shows wrong default date"
|
||||
7. Continue testing
|
||||
|
||||
### Designer's Perspective:
|
||||
|
||||
Receives feedback:
|
||||
```
|
||||
Bug: `customer-facility-startdate-group` shows wrong default date
|
||||
```
|
||||
|
||||
- Open prototype
|
||||
- Press **Ctrl+F** in browser, search for `customer-facility-startdate-group`
|
||||
- Find exact element in code
|
||||
- Fix the date calculation
|
||||
- Done! ✅
|
||||
|
||||
---
|
||||
|
||||
## 🔧 For Developers
|
||||
|
||||
When you receive Object IDs in feedback:
|
||||
|
||||
1. Open the HTML file
|
||||
2. Search for the Object ID (Ctrl+F)
|
||||
3. Element is either:
|
||||
- `id="object-id"` attribute
|
||||
- `data-object-id="object-id"` attribute
|
||||
4. Fix the issue in that specific element
|
||||
|
||||
---
|
||||
|
||||
## ❓ FAQs
|
||||
|
||||
**Q: Does Dev Mode affect the prototype?**
|
||||
A: No! The prototype works normally. You need to hold Shift to copy IDs.
|
||||
|
||||
**Q: Can I use this on mobile?**
|
||||
A: Yes! The button appears on mobile too. Use a Bluetooth keyboard or on-screen Shift key.
|
||||
|
||||
**Q: Can I type in form fields while Dev Mode is on?**
|
||||
A: Yes! Shift key is automatically disabled when you're typing in input fields or textareas, so you can type capital letters and special characters normally.
|
||||
|
||||
**Q: What if an element doesn't have an ID?**
|
||||
A: Dev Mode walks up the tree to find the nearest parent with an ID.
|
||||
|
||||
**Q: Can I copy multiple IDs?**
|
||||
A: Yes! Hold Shift, click first element, release Shift, hold again, click second element, etc.
|
||||
|
||||
**Q: Is this only for bugs?**
|
||||
A: No! Use it for any feedback - bugs, suggestions, questions, clarifications.
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Best Practices
|
||||
|
||||
### For Testers:
|
||||
- ✅ **DO**: Include Object ID in every piece of feedback
|
||||
- ✅ **DO**: Test prototype normally, copy IDs when needed
|
||||
- ✅ **DO**: Combine Object ID with description
|
||||
- ❌ **DON'T**: Leave Dev Mode on during normal use
|
||||
|
||||
### For Designers:
|
||||
- ✅ **DO**: Ensure all interactive elements have Object IDs
|
||||
- ✅ **DO**: Use descriptive, consistent naming
|
||||
- ✅ **DO**: Include Dev Mode in all prototypes
|
||||
- ❌ **DON'T**: Change Object IDs after sharing prototype
|
||||
|
||||
---
|
||||
|
||||
## 🚨 Troubleshooting
|
||||
|
||||
**Problem**: Dev Mode button not showing
|
||||
**Solution**: Check that `dev-mode.js` and `dev-mode.css` are loaded
|
||||
|
||||
**Problem**: Clicking doesn't copy
|
||||
**Solution**: Make sure you're holding **Shift** while clicking
|
||||
|
||||
**Problem**: Tooltip not showing
|
||||
**Solution**: Element might not have an ID - check console logs
|
||||
|
||||
**Problem**: Can't turn off Dev Mode
|
||||
**Solution**: Press Ctrl+E or refresh the page
|
||||
|
||||
---
|
||||
|
||||
**Dev Mode makes feedback precise, fast, and frustration-free!** 🎯
|
||||
|
||||
Reference in New Issue
Block a user