docs(css): Add comprehensive CSS refactoring plan and documentation
Add complete planning documentation for CSS architecture refactoring project: - 7-phase implementation plan (92-120 hours) - 123 detailed tasks across all phases - Target: ~3,260 lines CSS reduction (40-50%) - Complete requirements analysis - Progress tracking system - Phase-by-phase breakdown with acceptance criteria Documentation structure: - features/README.md - Project overview and quick start - features/CSS_REFACTORING_PLAN.md - Implementation strategy - features/CSS_REFACTORING_REQUIREMENTS.md - Detailed requirements - features/PROGRESS_TRACKER.md - Live progress tracking - features/phases/*.md - 7 phase documents with tasks Ready to begin Phase 1: Forms Standardization 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
359
features/phases/phase-3-primevue.md
Normal file
359
features/phases/phase-3-primevue.md
Normal file
@@ -0,0 +1,359 @@
|
||||
# Phase 3: PrimeVue Centralizare 🎨
|
||||
|
||||
**Priority:** High - Eliminate anti-patterns
|
||||
**Duration:** 6-8 hours
|
||||
**Status:** ⏸️ Not Started
|
||||
**Risk Level:** Medium
|
||||
|
||||
---
|
||||
|
||||
## Obiective
|
||||
|
||||
1. **Elimină toate `:deep()` din componente** - 50+ instanțe → 0
|
||||
2. **Centralizează în primevue-overrides.css** - Single source of truth
|
||||
3. **Replace hardcoded values** - #3b82f6 → var(--color-primary)
|
||||
4. **Zero `!important` în components** - Only in global overrides
|
||||
|
||||
---
|
||||
|
||||
## Task Breakdown (12 tasks)
|
||||
|
||||
### 1. Audit `:deep()` Usage (1 task)
|
||||
|
||||
#### Task 1.1: Find All `:deep()` Instances
|
||||
**Status:** ⏸️ | **Est:** 20 min
|
||||
|
||||
```bash
|
||||
cd reports-app/frontend
|
||||
|
||||
# Find all :deep() usage
|
||||
grep -rn ":deep(" src/views/ src/components/
|
||||
|
||||
# Count instances
|
||||
grep -r ":deep(" src/ | wc -l
|
||||
|
||||
# Create audit file
|
||||
grep -rn ":deep(" src/ > /tmp/deep-overrides-audit.txt
|
||||
cat /tmp/deep-overrides-audit.txt
|
||||
```
|
||||
|
||||
**Document findings:**
|
||||
- [ ] LoginView.vue: Lines 269-288 (~20 lines)
|
||||
- [ ] InvoicesView.vue: Lines ___
|
||||
- [ ] Card components: Lines ___
|
||||
- [ ] Total instances: ___
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] All `:deep()` instances documented
|
||||
- [ ] File/line numbers recorded
|
||||
- [ ] Ready for migration
|
||||
|
||||
---
|
||||
|
||||
### 2. Migrate Component Overrides (6 tasks)
|
||||
|
||||
#### Task 2.1: Migrate LoginView.vue
|
||||
**Status:** ⏸️ | **Est:** 45 min
|
||||
|
||||
**Remove from LoginView.vue (lines 269-288):**
|
||||
```vue
|
||||
<style scoped>
|
||||
/* DELETE ALL :deep() - Already in primevue-overrides.css */
|
||||
:deep(.p-inputtext),
|
||||
:deep(.p-password input) {
|
||||
/* ... all lines ... */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
**Verify in primevue-overrides.css:**
|
||||
```css
|
||||
/* Already exists from Phase 2 */
|
||||
.p-inputtext,
|
||||
.p-password input {
|
||||
border: 2px solid var(--color-border) !important;
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
**Test:**
|
||||
- [ ] Login form inputs styled correctly
|
||||
- [ ] Focus states work
|
||||
- [ ] Validation states work
|
||||
- [ ] No visual regression
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] All `:deep()` removed from LoginView.vue
|
||||
- [ ] Form still styled correctly
|
||||
- [ ] Playwright test passes
|
||||
|
||||
---
|
||||
|
||||
#### Task 2.2: Migrate InvoicesView.vue
|
||||
**Status:** ⏸️ | **Est:** 30 min
|
||||
|
||||
**Search and remove:**
|
||||
```bash
|
||||
# Find PrimeVue overrides
|
||||
grep -n "p-" src/views/InvoicesView.vue
|
||||
```
|
||||
|
||||
**Remove any `:deep()` for:**
|
||||
- [ ] Dropdown styling
|
||||
- [ ] Calendar styling
|
||||
- [ ] DataTable styling
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] No `:deep()` in InvoicesView.vue
|
||||
- [ ] Filters work correctly
|
||||
- [ ] Table styled correctly
|
||||
|
||||
---
|
||||
|
||||
#### Task 2.3: Migrate Card Components
|
||||
**Status:** ⏸️ | **Est:** 1 hour
|
||||
|
||||
**Components to check:**
|
||||
- [ ] MetricCard.vue
|
||||
- [ ] CashFlowMetricCard.vue
|
||||
- [ ] ClientiBalanceCard.vue
|
||||
- [ ] FurnizoriBalanceCard.vue
|
||||
- [ ] TreasuryDualCard.vue
|
||||
|
||||
**For each component:**
|
||||
```bash
|
||||
# Check for :deep()
|
||||
grep -n ":deep" src/components/dashboard/cards/*.vue
|
||||
```
|
||||
|
||||
**Remove and verify:**
|
||||
- [ ] Chart.js canvas overrides
|
||||
- [ ] PrimeVue Card overrides
|
||||
- [ ] Button overrides
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Zero `:deep()` in all card components
|
||||
- [ ] Charts render correctly
|
||||
- [ ] Cards styled identically
|
||||
|
||||
---
|
||||
|
||||
#### Task 2.4: Replace Hardcoded Colors
|
||||
**Status:** ⏸️ | **Est:** 1 hour
|
||||
|
||||
**Find all hardcoded colors:**
|
||||
```bash
|
||||
# Find hex colors
|
||||
grep -rn "#[0-9a-fA-F]\{6\}" src/ --include="*.vue"
|
||||
|
||||
# Common culprits
|
||||
grep -rn "#3b82f6" src/ # Primary blue
|
||||
grep -rn "#e5e7eb" src/ # Border gray
|
||||
grep -rn "#10b981" src/ # Success green
|
||||
grep -rn "#ef4444" src/ # Error red
|
||||
```
|
||||
|
||||
**Replace with tokens:**
|
||||
- `#3b82f6` → `var(--color-primary)`
|
||||
- `#e5e7eb` → `var(--color-border)`
|
||||
- `#10b981` → `var(--color-success)`
|
||||
- `#ef4444` → `var(--color-error)`
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Zero hardcoded hex colors in components
|
||||
- [ ] All use design tokens
|
||||
- [ ] Colors consistent across app
|
||||
|
||||
---
|
||||
|
||||
#### Task 2.5: Remove !important from Components
|
||||
**Status:** ⏸️ | **Est:** 30 min
|
||||
|
||||
**Find all !important:**
|
||||
```bash
|
||||
grep -rn "!important" src/views/ src/components/
|
||||
```
|
||||
|
||||
**Remove from scoped styles:**
|
||||
- Only global primevue-overrides.css should use `!important`
|
||||
- Component scoped styles should NEVER use it
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Zero `!important` in component <style scoped>
|
||||
- [ ] Styling still works via cascade
|
||||
|
||||
---
|
||||
|
||||
#### Task 2.6: Verify Zero :deep()
|
||||
**Status:** ⏸️ | **Est:** 15 min
|
||||
|
||||
**Final verification:**
|
||||
```bash
|
||||
# Should return 0 results
|
||||
grep -r ":deep(" src/views/ src/components/ | wc -l
|
||||
|
||||
# Verify = 0
|
||||
echo "Expected: 0, Actual: $(grep -r ':deep(' src/ | wc -l)"
|
||||
```
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Zero `:deep()` in entire codebase
|
||||
- [ ] All styling via global CSS
|
||||
- [ ] Audit complete
|
||||
|
||||
---
|
||||
|
||||
### 3. Testing (3 tasks)
|
||||
|
||||
#### Task 3.1: Component Testing
|
||||
**Status:** ⏸️ | **Est:** 45 min
|
||||
|
||||
**Test all PrimeVue components:**
|
||||
- [ ] InputText - border, focus, validation
|
||||
- [ ] Password - toggle mask, focus
|
||||
- [ ] Dropdown - options, selection, styling
|
||||
- [ ] Calendar - date picker, focus
|
||||
- [ ] DataTable - headers, rows, hover
|
||||
- [ ] Card - padding, borders, shadows
|
||||
- [ ] Button - variants, hover, disabled
|
||||
|
||||
**Test views:**
|
||||
- [ ] Login page - all form elements
|
||||
- [ ] Dashboard - all cards
|
||||
- [ ] Invoices - filters and table
|
||||
- [ ] Telegram - buttons and forms
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] All components styled correctly
|
||||
- [ ] No visual regressions
|
||||
- [ ] All states work (hover, focus, disabled)
|
||||
|
||||
---
|
||||
|
||||
#### Task 3.2: Playwright Visual Regression
|
||||
**Status:** ⏸️ | **Est:** 20 min
|
||||
|
||||
```bash
|
||||
npm run test:e2e
|
||||
|
||||
# Check for failures
|
||||
npm run test:e2e:report
|
||||
```
|
||||
|
||||
**Expected:**
|
||||
- [ ] All snapshots match (pixel-perfect)
|
||||
- [ ] No unexpected differences
|
||||
- [ ] Forms identical to Phase 1
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Playwright tests pass
|
||||
- [ ] Zero visual differences
|
||||
- [ ] Report reviewed
|
||||
|
||||
---
|
||||
|
||||
#### Task 3.3: Browser Compatibility
|
||||
**Status:** ⏸️ | **Est:** 30 min
|
||||
|
||||
**Test on:**
|
||||
- [ ] Chrome - PrimeVue components render
|
||||
- [ ] Firefox - CSS variables work
|
||||
- [ ] Safari - Focus states visible
|
||||
- [ ] Edge - No degradation
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Consistent across all browsers
|
||||
- [ ] No console errors
|
||||
- [ ] PrimeVue overrides work everywhere
|
||||
|
||||
---
|
||||
|
||||
### 4. Documentation & Commit (2 tasks)
|
||||
|
||||
#### Task 4.1: Update Guidelines
|
||||
**Status:** ⏸️ | **Est:** 20 min
|
||||
|
||||
**Update:** `docs/COMPONENT_STYLING.md`
|
||||
|
||||
```markdown
|
||||
## PrimeVue Styling Guidelines
|
||||
|
||||
### ❌ NEVER Do This
|
||||
\`\`\`vue
|
||||
<style scoped>
|
||||
:deep(.p-inputtext) {
|
||||
border: 2px solid #3b82f6 !important;
|
||||
}
|
||||
</style>
|
||||
\`\`\`
|
||||
|
||||
### ✅ Always Do This
|
||||
PrimeVue components are styled globally in:
|
||||
\`assets/css/vendor/primevue-overrides.css\`
|
||||
|
||||
Use classes, not overrides:
|
||||
\`\`\`vue
|
||||
<InputText class="form-input" />
|
||||
\`\`\`
|
||||
```
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Guidelines documented
|
||||
- [ ] Examples provided
|
||||
- [ ] Best practices clear
|
||||
|
||||
---
|
||||
|
||||
#### Task 4.2: Commit Phase 3
|
||||
**Status:** ⏸️ | **Est:** 10 min
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "feat(css): Phase 3 - Centralize PrimeVue overrides
|
||||
|
||||
- Migrate all :deep() to primevue-overrides.css
|
||||
- Remove 50+ instances of :deep() from components
|
||||
- Replace hardcoded colors with design tokens
|
||||
- Remove !important from component scoped styles
|
||||
- Update styling guidelines
|
||||
|
||||
Impact:
|
||||
- Zero :deep() in components
|
||||
- Single source of truth for PrimeVue styling
|
||||
- Consistent design token usage
|
||||
- Cleaner component code
|
||||
|
||||
Testing:
|
||||
- ✅ All PrimeVue components work
|
||||
- ✅ Playwright visual regression pass
|
||||
- ✅ Browser compatibility verified
|
||||
|
||||
Phase: 3/7 complete
|
||||
"
|
||||
|
||||
git push origin feature/css-refactoring
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Completion Criteria
|
||||
|
||||
- [ ] 0 `:deep()` instances in components
|
||||
- [ ] 0 hardcoded hex colors
|
||||
- [ ] 0 `!important` in scoped styles
|
||||
- [ ] All PrimeVue components styled globally
|
||||
- [ ] Visual regression tests pass
|
||||
- [ ] Documentation updated
|
||||
|
||||
---
|
||||
|
||||
## Next Phase
|
||||
|
||||
**Phase 4:** Card Components Refactoring
|
||||
- Extract common patterns (~800 lines)
|
||||
- See: [phase-4-cards.md](./phase-4-cards.md)
|
||||
|
||||
---
|
||||
|
||||
**Created:** 2025-11-18
|
||||
**Status:** ⏸️ Not Started
|
||||
Reference in New Issue
Block a user