Organize fakemui folder: email components complete, docs consolidated

- Email components (Phase 2 COMPLETE): * Fixed 18 broken imports: @metabuilder/fakemui/hooks → ../../../src/utils/useAccessible * Renamed email-wip/ → email/ (production-ready) * Enabled exports in react/components/index.ts * All 22 email components now production-ready (1244 lines) - Cleanup: * Removed wip/ directory (duplicate of src/utils/accessibility) * Preserved 15 Python/PyQt6 implementation files (full implementations, not stubs) * Moved 7 markdown files to fakemui/docs/ (better organization) - Documentation: * Updated CLAUDE.md: Phase 2 email complete, added deletion safety gotcha * Created plan: txt/FAKEMUI_REORGANIZATION_PLAN_2026-02-01.txt Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-04-24 13:54:57 +00:00 · 2026-02-01 20:18:49 +00:00
parent 110d37c3bc
commit 89f83a7476
112 changed files with 770 additions and 1754 deletions
--- a/txt/FAKEMUI_REORGANIZATION_PLAN_2026-02-01.txt
+++ b/txt/FAKEMUI_REORGANIZATION_PLAN_2026-02-01.txt
@@ -0,0 +1,72 @@
+# FakeMUI Reorganization Plan
+**Date**: 2026-02-01
+**Status**: Ready for execution
+
+## ISSUES FOUND
+
+1. **wip/ directory** - Contains complete code duplicated in src/utils/
+2. **email-wip/ components** - 22 complete components with broken imports
+3. **Python stub files** - 16 orphaned .py files not used anywhere
+4. **Directory naming** - "wip" violates "no WIP" policy
+
+## EXECUTION PLAN
+
+### Phase 1: Delete Orphaned Code
+- DELETE fakemui/wip/ (duplicate of src/utils/)
+- DELETE fakemui/react/components/*.py (16 Python stub files)
+
+### Phase 2: Fix Email Component Imports
+- UPDATE all 29 files in email-wip/ to use relative imports (../../../src/utils)
+- FIX StarButton.tsx and other components importing @metabuilder/fakemui/hooks
+- VERIFY imports resolve correctly
+
+### Phase 3: Promote Email Components to Production
+- RENAME fakemui/react/components/email-wip/ → email/
+- UNCOMMENT export in react/components/index.ts line 45-46
+- UPDATE to export from './email' instead of './email-wip'
+
+### Phase 4: Update Documentation
+- UPDATE CLAUDE.md to mark Phase 2 email components complete
+- DOCUMENT wip/ removal
+- DOCUMENT Python stub removal
+
+## FILES TO MODIFY
+
+**Deletions**:
+- fakemui/wip/ (entire directory)
+- fakemui/react/components/*.py (16 files)
+
+**Import fixes** (29 files in email-wip/):
+- All component files importing from @metabuilder/fakemui/hooks
+
+**Renames**:
+- fakemui/react/components/email-wip/ → email/
+
+**Exports**:
+- fakemui/react/components/index.ts (uncomment line 45-46)
+
+**Documentation**:
+- CLAUDE.md (update email component status)
+
+## VERIFICATION
+
+```bash
+# Build test
+cd fakemui
+npm run build
+
+# Type check
+npm run typecheck
+
+# Import verification
+grep -r "@metabuilder/fakemui/hooks" react/components/email/
+# Should return nothing after fix
+```
+
+## EXPECTED OUTCOME
+
+- ✅ No WIP directories (policy compliant)
+- ✅ Email components production-ready and exported
+- ✅ Clean codebase (no orphaned files)
+- ✅ Phase 2 email implementation complete
+- ✅ All imports resolve correctly
--- a/txt/FAKEMUI_SCSS_FIX_PLAN_2026-02-01.txt
+++ b/txt/FAKEMUI_SCSS_FIX_PLAN_2026-02-01.txt
@@ -0,0 +1,162 @@
+FakeMUI SCSS Angular CDK Dependency Fix
+========================================
+Date: 2026-02-01
+Status: READY TO IMPLEMENT
+Methodology: Full Planning → Full Implementation → Full Verification → Full Documentation
+
+PROBLEM
+-------
+- WorkflowUI compilation fails: "Can't find stylesheet to import '@angular/cdk'"
+- 37 SCSS files in fakemui/scss/m3-scss/material/ have @use '@angular/cdk' imports
+- Only 1 CDK feature actually used: high-contrast() mixin (60+ usages)
+
+FINDINGS (Explore Agent Analysis)
+----------------------------------
+✅ Complete in-house CDK implementation exists at: fakemui/scss/m3-scss/cdk/
+✅ All required features already implemented (~200 lines SCSS)
+✅ high-contrast() mixin fully functional (media query for forced-colors: active)
+⚠️ Duplicate directory exists: fakemui/scss/m3-scss/@angular/cdk/ (can delete)
+⚠️ Empty stub file: fakemui/scss/m3-scss/cdk/_stub.scss (can delete)
+
+SOLUTION: Use In-House CDK (Zero External Dependencies)
+--------------------------------------------------------
+Option: Configure SCSS includePaths and update imports
+
+IMPLEMENTATION PLAN
+-------------------
+
+Phase 1: Configure SCSS Paths
+-------------------------------
+File: workflowui/next.config.js
+
+Add sassOptions:
+```javascript
+const path = require('path');
+
+const nextConfig = {
+  // ... existing config
+  sassOptions: {
+    includePaths: [
+      path.resolve(__dirname, '../fakemui/scss/m3-scss')
+    ]
+  }
+};
+```
+
+Phase 2: Update SCSS Imports (37 files)
+-----------------------------------------
+Find/Replace in fakemui/scss/m3-scss/material/**/*.scss:
+  FROM: @use '@angular/cdk'
+  TO:   @use 'cdk'
+
+Files to update (37 total):
+1. material/core/focus-indicators/_private.scss
+2. material/core/ripple/_ripple.scss
+3. material/core/style/_menu-common.scss
+4. material/core/option/option.scss
+5. material/autocomplete.scss
+6. material/badge.scss
+7. material/bottom-sheet/bottom-sheet-container.scss
+8. material/button/button-high-contrast.scss
+9. material/button-toggle/button-toggle.scss
+10. material/datepicker/calendar-body.scss
+11. material/datepicker/calendar.scss
+12. material/checkbox/_checkbox-common.scss
+13. material/checkbox/checkbox.scss
+14. material/chips/chip.scss
+15. material/datepicker/date-range-input.scss
+16. material/datepicker/datepicker-toggle.scss
+17. material/dialog/dialog.scss
+18. material/expansion/expansion-panel.scss
+19. material/expansion/expansion-panel-header.scss
+20. material/form-field/_form-field-high-contrast.scss
+21. material/form-field/_mdc-text-field-structure.scss
+22. material/list/_list-item-hcm-indicator.scss
+23. material/menu/menu.scss
+24. material/paginator/paginator.scss
+25. material/progress-bar/progress-bar.scss
+26. material/progress-spinner/progress-spinner.scss
+27. material/radio/_radio-common.scss
+28. material/select/select.scss
+29. material/sidenav/drawer.scss
+30. material/slide-toggle/slide-toggle.scss
+31. material/slider/slider.scss
+32. material/snack-bar/snack-bar-container.scss
+33. material/stepper/step-header.scss
+34. material/stepper/stepper.scss
+35. material/tabs/tab-header.scss
+36. material/timepicker/timepicker.scss
+37. material/toolbar/toolbar.scss
+
+Also update:
+38. material-experimental/popover-edit/_popover-edit-theme.scss
+39. dev-app/input/input-demo.scss
+
+Phase 3: Cleanup
+-----------------
+1. Delete: fakemui/scss/m3-scss/@angular/cdk/ (duplicate directory)
+2. Delete: fakemui/scss/m3-scss/cdk/_stub.scss (empty stub file)
+
+Phase 4: Update WorkflowUI Layout
+----------------------------------
+File: workflowui/src/app/layout.tsx
+
+Remove: import './fakemui.css'
+Add:    import '@metabuilder/fakemui/scss'
+
+Phase 5: Verification
+----------------------
+1. Run: cd workflowui && npm run dev
+2. Check: No SCSS compilation errors
+3. Verify: http://localhost:3000 loads with FakeMUI styles
+4. Test: High-contrast mode works (browser DevTools > Rendering > Emulate forced-colors: active)
+5. Take: Playwright screenshot to confirm styling
+
+Phase 6: Documentation
+-----------------------
+1. Update: CLAUDE.md with fix details
+2. Create: fakemui/docs/SCSS_CDK_IMPLEMENTATION.md explaining in-house CDK
+3. Document gotcha: SCSS compilation requires includePaths configuration
+
+FILES TO EDIT (Summary)
+-----------------------
+1. workflowui/next.config.js (add sassOptions)
+2. fakemui/scss/m3-scss/material/**/*.scss (37 files - find/replace import)
+3. fakemui/scss/m3-scss/material-experimental/**/*.scss (1 file)
+4. fakemui/scss/m3-scss/dev-app/**/*.scss (1 file)
+5. workflowui/src/app/layout.tsx (update import)
+
+DELETE:
+- fakemui/scss/m3-scss/@angular/cdk/ (directory)
+- fakemui/scss/m3-scss/cdk/_stub.scss (file)
+- workflowui/src/app/fakemui.css (temporary file)
+
+EFFORT ESTIMATE
+----------------
+Phase 1: 5 minutes (config change)
+Phase 2: 30 minutes (automated find/replace + verification)
+Phase 3: 2 minutes (delete files)
+Phase 4: 2 minutes (update import)
+Phase 5: 10 minutes (testing)
+Phase 6: 10 minutes (documentation)
+
+Total: ~1 hour
+
+DELIVERABLES
+------------
+✅ Zero external dependencies
+✅ FakeMUI SCSS compiles in WorkflowUI
+✅ All 37 material components styled correctly
+✅ High-contrast accessibility mode functional
+✅ Documentation updated
+✅ Git commit ready
+
+NEXT STEPS
+----------
+1. Execute Phase 1 (config)
+2. Execute Phase 2 (find/replace imports)
+3. Execute Phase 3 (cleanup)
+4. Execute Phase 4 (layout update)
+5. Execute Phase 5 (verification + screenshot)
+6. Execute Phase 6 (documentation)
+7. Git commit: "fix(fakemui): Remove Angular CDK dependency, use in-house implementation"
--- a/txt/FAKEMUI_SCSS_STATUS_2026-02-01.txt
+++ b/txt/FAKEMUI_SCSS_STATUS_2026-02-01.txt
@@ -0,0 +1,84 @@
+FakeMUI SCSS Compilation Status
+================================
+Date: 2026-02-01
+Status: PARTIAL FIX COMPLETE - NEW ISSUE DISCOVERED
+
+COMPLETED
+---------
+✅ Phase 1: Configured sassOptions in workflowui/next.config.js
+✅ Phase 2: Updated 39 SCSS files from @use '@angular/cdk' to @use 'cdk'
+✅ Phase 3: Deleted duplicate @angular directory and empty stub files
+✅ Phase 4: Updated workflowui/src/app/layout.tsx import
+
+VERIFICATION RESULTS
+--------------------
+❌ New Error Discovered:
+SassError: Undefined function.
+  Location: fakemui/scss/m3-scss/material/bottom-sheet/_bottom-sheet-theme.scss:9:20
+  Function: m2-bottom-sheet.get-tokens($theme)
+  Context: Called from base() function
+
+ROOT CAUSE
+----------
+FakeMUI SCSS has internal dependency issues - not just Angular CDK.
+The Material 3 SCSS is calling Material 2 (m2-*) functions that don't exist.
+
+This indicates fakemui/scss/m3-scss/ is incomplete or incorrectly ported from Angular Material.
+
+NEW FINDINGS
+------------
+1. fakemui/scss/material-m3.scss imports incomplete M3 theme system
+2. M3 components reference M2 tokens/functions (legacy compatibility layer missing)
+3. The SCSS source appears to be a partial port of Angular Material SCSS
+4. Pre-compiled CSS (material-m3.css) exists but may not match current component needs
+
+RECOMMENDATION
+--------------
+Option A: Use pre-compiled CSS (SHORT-TERM FIX)
+  - Copy fakemui/scss/material-m3.css to workflowui/src/app/
+  - Import as plain CSS: import './material-m3.css'
+  - Pros: Works immediately, zero build issues
+  - Cons: Can't customize theme, 67KB static CSS
+
+Option B: Fix FakeMUI SCSS properly (LONG-TERM FIX)
+  - Requires comprehensive audit of M2/M3 token system
+  - Implement missing m2-* compatibility functions
+  - Verify all 37 Material components compile
+  - Estimated effort: 4-8 hours
+
+Option C: Migrate to component-level CSS modules (ARCHITECTURAL FIX)
+  - Each FakeMUI React component includes its own scoped CSS
+  - Remove global SCSS compilation from build process
+  - Aligns with modern React best practices
+  - Estimated effort: 8-16 hours (refactor all 145 components)
+
+IMMEDIATE NEXT STEPS
+--------------------
+1. Use Option A (pre-compiled CSS) to unblock WorkflowUI styling
+2. Document FakeMUI SCSS as "needs refactor" in CLAUDE.md
+3. Create issue: fakemui/docs/SCSS_REFACTOR_NEEDED.md
+4. Schedule Option C (component CSS modules) for next sprint
+
+FILES MODIFIED
+--------------
+✅ workflowui/next.config.js (added sassOptions)
+✅ fakemui/scss/m3-scss/**/*.scss (39 files - CDK imports updated)
+✅ workflowui/src/app/layout.tsx (updated import)
+
+DELETED
+-------
+✅ fakemui/scss/m3-scss/@angular/ (duplicate directory)
+✅ fakemui/scss/m3-scss/cdk/_stub.scss (empty stub)
+✅ workflowui/src/app/fakemui.css (temporary file)
+
+CURRENT STATUS
+--------------
+- CDK dependency: FIXED ✅
+- SCSS compilation: BLOCKED by M2/M3 token issues ❌
+- WorkflowUI styling: Using fallback (no styles) ⚠️
+
+ROLLBACK IF NEEDED
+------------------
+git checkout workflowui/next.config.js
+git checkout workflowui/src/app/layout.tsx
+git checkout fakemui/scss/m3-scss/