Breaking repo upgrade #33
Open
Conversation
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
- Added @aurodesignsystem/auro-config. - Added new configs pointing to auro-config. - Replaced esLint and scssLint scripts with a unified lint command using biome and stylelint. AlaskaAirlines/auro-cli#107
BREAKING CHANGE: Package exports have changed. To access the component class add /class to the end of the import. See "exports" in the package.json for more details. AlaskaAirlines/auro-cli#108 AlaskaAirlines/auro-cli#109 AlaskaAirlines/auro-cli#110 AlaskaAirlines/auro-cli#111
Workflows added/updated: - add-project - check-commits - check-pr - codeql - dev-demo - pull-request - release - sync-tags AlaskaAirlines/auro-cli#106
Reviewer's GuideThis PR performs a breaking upgrade of the repo by migrating styling to SCSS, integrating the auro-cli build system, adding runtime component registration, restructuring package exports, regenerating documentation from templates, normalizing tests and workflows, and tweaking utility code. Class diagram for updated custom elements with runtime registrationclassDiagram
class AuroTokenList {
+Array componentData
+String type
+String swatchType
+Boolean version
+String unit
+getTableHeaders()
+size(arg, value)
+isGradient(value)
+formatGradientValue(gradientObj)
+formatSingleGradient(gradient)
+hexToRgb(hex)
+deprecatedType(value)
+currentToken(reference)
+static register(name)
+render()
<<customElement>>
}
class AuroTokenDisplay {
+String appearance
+Array componentData
+Boolean ondark
+firstUpdated()
+fetchWCAG(colorValue, backgroundColor)
+validateRatings(wcag)
+static register(name)
+render()
<<customElement>>
}
class AuroTokenAvatar {
+String appearance
+String avatartype
+String colorname
+static register(name)
+render()
<<customElement>>
}
class RuntimeUtils {
+registerComponent(name, classRef)
}
AuroTokenList ..> RuntimeUtils : uses
AuroTokenDisplay ..> RuntimeUtils : uses
AuroTokenAvatar ..> RuntimeUtils : uses
Class diagram for new index.js module exportsclassDiagram
class index {
+AuroTokenList
+AuroTokenDisplay
+AuroTokenAvatar
}
index --> AuroTokenList
index --> AuroTokenDisplay
index --> AuroTokenAvatar
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- package.json has been reset to version "0.0.0"—please confirm and update to the intended release version before publishing.
- The migration to SCSS imports (e.g. style-tokenlist.scss) relies on the new Auro CLI build pipeline—please verify that these assets are correctly compiled and bundled in CI.
- Peer dependencies have been consolidated after the CLI upgrade—double-check that all required runtime dependencies (e.g. auro-icon, auro-popover) are still declared or bundled for downstream consumers.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- package.json has been reset to version "0.0.0"—please confirm and update to the intended release version before publishing.
- The migration to SCSS imports (e.g. style-tokenlist.scss) relies on the new Auro CLI build pipeline—please verify that these assets are correctly compiled and bundled in CI.
- Peer dependencies have been consolidated after the CLI upgrade—double-check that all required runtime dependencies (e.g. auro-icon, auro-popover) are still declared or bundled for downstream consumers.
## Individual Comments
### Comment 1
<location> `test/auro-tokendisplay.test.js:154-157` </location>
<code_context>
});
- it('auro-tokendisplay WCAG ratio from webaim.org is displayed', async () => {
+ it("auro-tokendisplay WCAG ratio from webaim.org is displayed", async () => {
const el = await fixture(html`
<auro-tokendisplay componentData=${componentData}></auro-tokendisplay>
</code_context>
<issue_to_address>
**suggestion (testing):** Consider adding a test for error handling when webaim.org is unreachable.
Please add a test that verifies the UI response when the WCAG API is unreachable, such as displaying 'n/a' or an error message.
Suggested implementation:
```javascript
it("displays 'n/a' when WCAG API is unreachable", async () => {
// Mock the fetch or API call used by auro-tokendisplay to get WCAG ratio
// This assumes the component uses window.fetch or similar internally
const originalFetch = window.fetch;
window.fetch = () => Promise.reject(new Error("Network error"));
const el = await fixture(html`
<auro-tokendisplay componentData=${componentData}></auro-tokendisplay>
`);
// Wait for any async updates (if the component uses async/await or updates after fetch)
await el.updateComplete?.();
// Check that the UI displays 'n/a' or an error message
// Adjust the selector and expected text as needed for your implementation
const wcagRatioCell = el.shadowRoot
? el.shadowRoot.querySelector(".wcag-ratio")
: el.querySelector(".wcag-ratio");
await expect(wcagRatioCell?.textContent).to.match(/n\/a|error/i);
// Restore original fetch
window.fetch = originalFetch;
});
it("auro-tokendisplay custom element is defined", async () => {
const el = Boolean(customElements.get("auro-tokendisplay"));
await expect(el).to.be.true;
});
```
- If your component uses a different method to fetch the WCAG ratio (e.g., XMLHttpRequest, a custom fetch function, or a library), you will need to mock that instead of window.fetch.
- Adjust the selector `.wcag-ratio` and the expected text to match your actual DOM structure and error display.
- If your component does not use `updateComplete`, use an appropriate method to wait for the UI to update after the failed fetch.
</issue_to_address>
### Comment 2
<location> `test/auro-tokenlist.test.js:380-377` </location>
<code_context>
});
- it('auro-tokenlist deprecated version table is accessible', async () => {
+ it("auro-tokenlist deprecated version table is accessible", async () => {
const el = await fixture(html`
<auro-tokenlist type="deprecated" version componentData='[
</code_context>
<issue_to_address>
**suggestion (testing):** Consider adding tests for empty or malformed componentData.
Please add tests for cases where componentData is empty, missing fields, or malformed to verify the component remains stable and accessible.
</issue_to_address>
### Comment 3
<location> `docs/api.md:11` </location>
<code_context>
| colorname | colorname | | string | | Pass in `-`(dash) to delimitated name of color token. |
</code_context>
<issue_to_address>
**issue (typo):** Typo: 'delimitated' should be 'delimited'.
The correct wording is: 'Pass in a dash (`-`) to delimit the name of the color token.'
```suggestion
| colorname | colorname | | string | | Pass in a dash (`-`) to delimit the name of the color token. |
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
|
🚀 PR Release Published! To install: npm install @aurodesignsystem-dev/[email protected]Install via alias: npm install @aurodesignsystem/auro-tokenlist@npm:@aurodesignsystem-dev/[email protected] |
Component Demo Linkstokenlist: https://auro-tokenlist-33.surge.sh |
🚨 Breaking Change Review PolicyThis PR contains breaking changes and requires at least Approvals: |
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.
Alaska Airlines Pull Request
Breaking repo upgrade
Resolves: AlaskaAirlines/auro-cli#191
Checklist:
By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.
Thank you for your submission!
-- Auro Design System Team
Summary by Sourcery
Upgrade repository to use the Auro CLI toolchain and standardized project templates, modernize component implementations to LitElement v4 with SCSS styling, update package configuration, documentation, demos, tests, and CI workflows to align with Auro Design System conventions.
Enhancements:
Build:
auro buildandauro devcommandsCI:
Documentation:
Tests:
Chores: