Repository navigation
chore(ui-kit): upgrade design-system dependencies to latest - #635
Open
BleedingDev wants to merge 12 commits into
Open
BleedingDev wants to merge 12 commits into
BleedingDev wants to merge 12 commits into
Conversation
Upgrade @techsio/ui-kit and its tooling (Storybook 10, Rslib 1, Playwright 1.63, TypeScript 6/7 toolchain, Biome, pnpm 12, Node 26) and keep rendering pixel-identical through an exact Docker screenshot matrix. - Replace the bespoke visual harness with Playwright-native HAR replay, a seeded Math.random init script and an exact decoded-RGBA comparison. - Drop the broken arm64 lane and local AVIF adapter; tests run as linux/amd64. - Share token-validator prefix tables, resolve compound declarations from the package export map, and simplify the Storybook a11y runner and workflows. - Remove the VS Code integration. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
Review changes with |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
WalkthroughWarning Review details and warnings were omitted to fit the comment limit. |
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| return match && mode !== "none" | ||
| }) | ||
| const containerName = `pw-visual-${crypto.randomUUID()}` | ||
| const reportRoot = "/app/test-results/visual-reports" |
There was a problem hiding this comment.
With PLAYWRIGHT_DOCKER_SEQUENTIAL=1, each new playwright test run clears test-results, deleting the earlier projects' JSON reports. After the last project passes, verifyCompletion reads those deleted files and the command fails. Save the reports outside test-results, or read each one before starting the next project.
Suggested change
| const reportRoot = "/app/test-results/visual-reports" | |
| const reportRoot = "/app/visual-reports" |
Comment on lines
+57
to
+61
| webServer: { | ||
| command: "node test/visual-static-server.mjs", | ||
| url: storybookUrl, | ||
| env: { VISUAL_STORYBOOK_PORT: baseUrl.port || "6006" }, | ||
| reuseExistingServer: false, |
There was a problem hiding this comment.
The documented TEST_BASE_URL=http://host.docker.internal:6006 workflow now fails. With reuseExistingServer: false, Playwright rejects the running host server instead of using it. If that server is not running, the new server binds only to the container's 127.0.0.1 and cannot make the host URL ready. Skip webServer for an external URL, or allow reuse when an existing server was explicitly requested.
Comment on lines
+744
to
+748
| const columnHandle = canvas.getByLabelText("Drag to reorder First name") | ||
| columnHandle.focus() | ||
| await userEvent.keyboard("[Space]") | ||
| await waitFor(() => expect(columnHandle).toHaveAttribute("aria-pressed", "true")) | ||
| await userEvent.keyboard("[ArrowRight]") |
There was a problem hiding this comment.
The new reorder tests use only the keyboard, but this migration also replaces pointer activation, drag-handle wiring, and pointer drop detection. Keyboard tests take a separate branch in tableCollisionDetector, so they cannot catch a broken mouse path. Add a native pointer test that drags both a row and a column, then checks the callback values and final order.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Resolve conflicts with the latest master: keep master's agent-plugin skill layout and new components, re-apply the dependency-upgrade version bumps on top of master's versions, regenerate the plugin skill bundle and the lockfile, and move every Zag package (including master's new ones) to 1.45. - Run master's Playwright behavior specs in dedicated desktop/mobile projects; completeness counts screenshot cases only. - Export Hotkeys and Tour compound members in native declarations and accept declaration-emit alias placeholders in the compound validator. - Type the Tooltip span trigger for Zag 1.45; load Bun types for Bun tests. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
| signal: result.signal, | ||
| // Behavior specs share the run; completeness counts screenshot cases only. | ||
| const required = stories.length * projects.length | ||
| if (!expected || (requireComplete && expected !== required)) { |
There was a problem hiding this comment.
The documented command test:components hotkeys.spec.ts --project=desktop now fails even when every selected test passes. visualTests counts only visual.spec.ts, but the desktop project excludes that file. The unconditional !expected check therefore rejects every behavior-only run.
Allow successful focused behavior runs without requiring a screenshot result. Keep the full screenshot count check for full runs.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| if (result.status !== 0) { | ||
| /** @param {string} command @param {string[]} args @param {import("node:child_process").SpawnSyncOptions} [options] */ | ||
| function run(command, args, options = {}) { | ||
| const result = spawnSync(command, args, { stdio: "inherit", ...options }) |
There was a problem hiding this comment.
If a Windows installation provides pnpm.cmd, the default rebuild now fails before Docker starts. run calls spawnSync without the previous Windows shell option, but main still launches "pnpm". Node cannot launch that Windows command shim this way.
Restore Windows command-shim support for the rebuild.
Storybook A11y Report
Light
By group
New violations (323)
Resolved violations (409)
Dark
By group
|
Render master's Storybook and this branch with the same Docker harness and refresh baselines from the branch: 6,894 of 6,933 screenshots are byte-identical to master. Remaining differences are the changelog text, the fixed StickyHeader rows, tw-animate-css corner anti-aliasing on four DatePicker shots (<= 4 px, <= 2/255) and corner noise that also varies between master runs. - Record the remote images used by master's Pages stories in the visual HAR and replace a dead Unsplash banner URL in the Akros story data. - Remove 106 baselines for stories that no longer exist. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Vercel only offers Node 20, 22 and 24, so engines.node 26.x failed every preview deployment. Require >=24: Vercel selects its latest 24.x, while local tooling and the Playwright image stay on Node 26. Storybook and the library build under Node 24.20. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The Nx boundary lint runs without the Tailwind ESLint plugin, so inline disables naming tailwindcss/no-unnecessary-arbitrary-value failed as unknown rules. Declare the exception for the two story files in the ui-kit ESLint config instead; the theme remaps the spacing scale, so their fixed demo dimensions must stay arbitrary values. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
new-engine-ctl declares Node 24.x and its CI wiring test requires the main workflow to use it. The UI typecheck, package output check and asset replay contracts in this job pass on Node 24.20; UI-only workflows stay on Node 26. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Align the app Biome pins with the root 2.5.15, keep rules that newly fire under ultracite 7 off outside libs/ui, apply Biome 2.5 formatting, and let payload accept pnpm 12. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Carry master's NumericInput v1.1.0 and QuantityField onto the upgraded toolchain; the branch's explicit input-ID precedence and template label forwarding ship as NumericInput v1.1.1. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Package exports point the tokens CSS subpaths at styles.d.ts, so it must keep its file-level default export. The ambient *.css declaration used for internal stylesheet imports moves to its own file. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@zag-js/focus-visible redefines HTMLElement.prototype.focus without writable. When another tool has already turned focus into an accessor, as Storybook's preview does, the redefined method becomes read-only and react-aria's unload teardown throws. Patch both redefinitions to stay writable. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Add visual baselines for master's new QuantityField, NumericInput and FormNumericInput stories across the brand matrix, refresh the changelog story, and settle five baselines on their stable sub-perceptual corner anti-aliasing variant. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
KaiUweCZE
approved these changes
Oct 8, 2026
This branch was successfully deployed
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
2 participants
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.
Storybook visual tests | Dockerfile
Why the change
The design system ran on outdated tooling, and this moves it to the latest versions while proving with an exact screenshot matrix that nothing renders differently.
Special things to note
master(Pages stories, Akros, async Combobox, FacetFilterPanel, skill layout); every Zag package is now 1.45. Rendering master's Storybook and this branch with the same harness: 6,894 of 6,933 screenshots are byte-identical. The rest are the changelog text, fixed StickyHeader rows, ≤ 4 px / ≤ 2/255 corner anti-aliasing on four DatePicker shots (tw-animate-css no longer setsanimation-durationon non-animated elements), and corner noise that also varies between master runs.toHaveScreenshotignores some anti-aliasing even at zero threshold. Visual tests always run aslinux/amd64.atoms-button--statesunder full load that also appeared in isolation with neither harness.Change outline
Upgraded toolchain for
libs/uiand the files it needs.Visual test harness: custom code replaced with Playwright features.
How a screenshot is checked:
Other simplifications.
Checks run
typecheck(incl. Bun tests), ESLint,validate:tokens,check:package(195 export targets, 335 compound members), Vitest, Bun SSR test, 15 HAR replay contract tests, skill-sync gate.🤖 Generated with Claude Code