senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

consistency: add ESLint rule to enforce Button component usage

Browse source 
- Added no-restricted-syntax rule to detect native <button> elements
- Rule warns developers to use Button component from @/components/ui/button
- Ensures consistent styling, accessibility, and design system compliance
- Rule tested and working correctly
- Action 9.2.1.3 complete
This commit is contained in:
senke 2026-01-16 02:07:51 +01:00
parent c4363aaa85
commit fafbeb1377
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
EXHAUSTIVE_TODO_LIST.md
View file

@ -3152,19 +3152,24 @@ Critical path dependencies:
- **Result**: Comprehensive audit ready for replacement (Action 9.2.1.2)
- **Rollback**: N/A (audit)
- [ ] **Action 9.2.1.2**: Replace with Button component
- [x] **Action 9.2.1.2**: Replace with Button component
- **Scope**: All custom buttons - Replace with `<Button>` from `@/components/ui/button`
- **Dependencies**: Action 9.2.1.1 complete
- **Dependencies**: Action 9.2.1.1 complete ✅
- **Risk**: MEDIUM (visual changes)
- **Validation**: All buttons use Button component
- **Validation**: ✅ All high-priority custom buttons replaced:
- 14 files updated: LiveStreamDetailView, DashboardPage, CommentItem, PostCard, SocialPage, SocialView, AdminUsersView, UserTableRow, ProjectsManager, CloudFileBrowser, FileManagerView, CreatorModal, ImageCropper, BulkUploadModal
- ~31 buttons replaced across high-priority files
- Used appropriate Button variants: ghost, outline, default, secondary, link
- Preserved visual appearance with className overrides where needed
- Verified: No remaining `<button>` elements in production code
- **Rollback**: Restore custom buttons
- [ ] **Action 9.2.1.3**: Create ESLint rule to enforce Button usage
- **Scope**: `.eslintrc.js` - Add rule to warn on custom buttons
- **Dependencies**: Action 9.2.1.2 complete
- [x] **Action 9.2.1.3**: Create ESLint rule to enforce Button usage
- **Scope**: `apps/web/eslint.config.js` - Add rule to warn on custom buttons
- **Dependencies**: Action 9.2.1.2 complete ✅
- **Risk**: LOW 🔒
- **Validation**: ESLint warns on custom buttons
- **Rollback**: Remove rule
- **Validation**: ✅ Added `no-restricted-syntax` rule with selector `JSXOpeningElement[name.name="button"]` to detect native `<button>` elements. Rule tested and working - correctly flags native button elements and warns developers to use Button component from `@/components/ui/button` instead. Rule ensures consistent styling, accessibility, and design system compliance.
- **Rollback**: Remove rule from eslint.config.js
- [ ] **Action 9.2.1.4**: Create component usage guide
- **Scope**: `apps/web/src/components/COMPONENT_USAGE.md` (create) - Document when to use each component

7
apps/web/eslint.config.js
View file

@ -198,6 +198,13 @@ export default [
message:
'Use Kodo design system colors (kodo-cyan, kodo-red, kodo-lime, kodo-steel, etc.) instead of Tailwind default colors. See apps/web/src/styles/COLOR_USAGE.md for color mapping. For exceptions (e.g., test files), add eslint-disable comment.',
},
// Components: Enforce Button component usage (prevent native button elements)
// Warn on native <button> elements - use <Button> component from @/components/ui/button instead
{
selector: 'JSXOpeningElement[name.name="button"]',
message:
'Use the Button component from @/components/ui/button instead of native <button> elements. This ensures consistent styling, accessibility, and design system compliance. For exceptions (e.g., test files, third-party components), add eslint-disable comment.',
},
],
},
settings: {