MetaMask / MetaMask/metamask-design-system

[ESLint] Fix ESLint violations in the currently ignored files for the design-system-react-native package

Open
#658 0 comments 0 reactions 1 assignee Claimed by @brianacnguyen View on GitHub
team-design-system
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**

Fix ESLint violations in the currently ignored files for the design-system-react-native package and remove them from the ignore list. This will improve code quality, type safety, and maintainability across the entire codebase.

### **Technical Details**

Several files in the design-system-react-native package are currently ignored in the ESLint configuration. These files contain violations that need to be addressed, particularly in components like:

- Avatar components (AvatarFavicon, AvatarGroup, AvatarNetwork, AvatarToken)
- Badge components
- Utility components like Jazzicon and Maskicon

Common violations include:
- `no-bitwise`: Using bitwise operators like `<<`, `&`, and `>>`
- `@typescript-eslint/no-non-null-assertion`: Using non-null assertion operator (`!`)
- Import ordering issues
- Type safety concerns

### **Approach**

1. Work through each ignored file in the design-system-react-native package, addressing its specific ESLint violations
2. Prioritize files with fewer or simpler violations first
3. For components with bitwise operations (like Maskicon.utilities.ts), consider:
- Replacing with standard arithmetic operations where possible
- Adding proper documentation where bitwise operations are necessary
- Using ESLint exceptions with clear explanations only when absolutely needed
4. For TypeScript non-null assertions, replace with proper null checking
5. Remove each file from the ignore list as violations are fixed
6. Ensure all tests continue to pass

### **Acceptance Criteria**

- All design-system-react-native files are removed from the ignore list in the ESLint configuration
- All ESLint violations are fixed or have proper exceptions with explanations
- No new ESLint warnings are introduced
- All tests continue to pass
- Code functionality remains unchanged

### **References**

- Current ESLint configuration
- Similar violations in the react-native package (e.g., Maskicon.utilities.ts with bitwise operations and non-null assertions)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.