Refactor/theme resolve helpers - #59
Open
pmerritt-cmu wants to merge 5 commits into
Open
Conversation
…buildScales, computeCompactBody, computeToneContext, and surface/tone helpers outside of the main buildTokenContext function
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
Use this pull request template to briefly answer the questions below in one to two sentences each.
Feel free to delete this text at the top after filling out the template.
1. Issue
Link to the associated GitHub issue:
#33
Full path to the refactored file:
packages/ui/src/theme/resolve.ts
What do you think this file does?
(Your answer does not have to be 100% correct; give a reasonable, evidence‑based guess.)
This function takes in themes and generates CSS properties depending on the input theme and whether dark mode is active.
What is the scope of your refactoring within that file?
(Name specific functions/blocks/regions touched.)
I changed the resolveThemeVariant Function
Which Qlty‑reported issue did you address?
(Name the rule/metric and include the BEFORE value; e.g., “Cognitive Complexity 18 in render()”.)
Function with many returns (count = 9): resolveThemeVariant
2. Refactoring
How did the specific issue you chose impact the codebase’s maintainability?
There are so many inline functions that it is distracting from the main purpose of the main function. It makes it hard to isolate functionality and test new changes in the future.
What changes did you make to resolve the issue?
I extrapolated these inline functions into their own independent helpers. I also moved some of the large chunks of declaring token[value] into their own helpers to clarify what the main function is doing, as well as making it testable.
How do your changes improve maintainability? Did you consider alternatives?
These changes make the resolveThemeVariant function testable because now one can change individual parts of this function and test them in an isolated fashion.
I considered having two entirely different functions for the isDark and !isDark case, but this would have led to repeated code. I also considered keeping the resolveThemVariant function long with a bunch of token[value] = x statements, but this just confuses developers on what the goal of these declarations is. Moving them into a function allows for naming the goal of a set of these declarations.
3. Validation
How did you validate that the change is correct?
I created a new test file for each of the helpers with the isDark and !isDark cases. I also ran all themes specified in packages/ui/src/theme/themes and got the same output object across the new file as in the old file.
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.