Refactor (packages/ui/src/theme/v2/avatar.ts): Found 21 lines of similar code in 2 locations - #82
Open
CoralZhu wants to merge 1 commit into
Open
Refactor (packages/ui/src/theme/v2/avatar.ts): Found 21 lines of similar code in 2 locations#82CoralZhu wants to merge 1 commit into
CoralZhu wants to merge 1 commit into
Conversation
CoralZhu
force-pushed
the
refactor-avatar-duplication
branch
from
September 6, 2026 21:04
dd57f68 to
627971e
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
P1B: Starter Task: Refactoring PR
1. Issue
Link to the associated GitHub issue:
Closes #50
Full path to the refactored file:
packages/ui/src/theme/v2/avatar.tsWhat do you think this file does?
This file defines the foreground, background, and border colors used for project avatars in the light and dark V2 themes.
What is the scope of your refactoring within that file?
I refactored the duplicated
V2_AVATAR_LIGHTandV2_AVATAR_DARKcolor definitions by introducing a shared color data structure and acreateAvatarThemehelper function.Which Qlty-reported issue did you address?
Qlty reported 21 lines of similar code in two locations, beginning at lines 6 and 28, with a mass of 105.
2. Refactoring
How did the specific issue you chose impact the codebase’s maintainability?
The duplicated light and dark theme structures repeated the same avatar color keys, making future updates more error-prone because both blocks had to remain synchronized.
What changes did you make to resolve the issue?
I placed each color’s light and dark background and border values in a shared
V2_AVATAR_COLORSobject. I then addedcreateAvatarThemeto generate the two exported theme records from that shared data.How do your changes improve maintainability? Did you consider alternatives?
The new structure keeps related light and dark values together and defines the repeated key-generation logic only once. I considered keeping the two objects separate, but that would preserve the duplication and require future changes to be made in multiple places.
3. Validation
How did you validate that the change is correct?
I added
avatar.test.tsto verify that both themes contain the same 19 keys and preserve every original background and border color. All 37 tests inpackages/uipassed, andavatar.tsreached 100% function and line coverage; targeted linting also reported 0 warnings and 0 errors.Attach a screenshot of the test coverage showing the lines were executed by the tests.
Attach a screenshot showing the tests that cover the change passing during CI
Attach a screenshot of
qlty smells --no-snippets <full/path/to/file.ts>showing fewer reported issues after the changes.