Skip to content

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
CMU-313:mainfrom
CoralZhu:refactor-avatar-duplication
Open

Refactor (packages/ui/src/theme/v2/avatar.ts): Found 21 lines of similar code in 2 locations#82
CoralZhu wants to merge 1 commit into
CMU-313:mainfrom
CoralZhu:refactor-avatar-duplication

Conversation

@CoralZhu

@CoralZhu CoralZhu commented Sep 6, 2026

Copy link
Copy Markdown

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.ts

What 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_LIGHT and V2_AVATAR_DARK color definitions by introducing a shared color data structure and a createAvatarTheme helper 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_COLORS object. I then added createAvatarTheme to 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.ts to verify that both themes contain the same 19 keys and preserve every original background and border color. All 37 tests in packages/ui passed, and avatar.ts reached 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.

Screenshot 2026-09-06 at 17 10 10

Attach a screenshot showing the tests that cover the change passing during CI

image

Attach a screenshot of qlty smells --no-snippets <full/path/to/file.ts> showing fewer reported issues after the changes.

Screenshot 2026-09-06 at 17 10 20

@CoralZhu
CoralZhu force-pushed the refactor-avatar-duplication branch from dd57f68 to 627971e Compare September 6, 2026 21:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

P1B: Refactor (packages/ui/src/theme/v2/avatar.ts:6): Found 21 lines of similar code in 2 locations

1 participant