refactor: align v2 with main's monorepo structure and tooling (vitest, storybook test, workshop folded in) by stipsan · Pull Request #2265 · sanity-io/ui

stipsan · 2026-07-06T10:58:26Z

Summary

Gives the v2 branch the same monorepo structure and tooling as main, in three commits:

1. Monorepo structure (`refactor: structure as a pnpm monorepo matching main`)

packages/ui — the published @sanity/ui package; packages/figma — the Figma plugin (now private); apps/storybook — Storybook as a private workspace app; private workspace root (sanity-ui-monorepo) orchestrating via pnpm filters
All files moved with git mv so history follows renames
semantic-release runs from packages/ui (release config + CHANGELOG moved with the package)
pnpm.overrides use literal versions (previous $-references pointed at root devDependencies that no longer exist)

2. Testing modernization (`test: replace jest with vitest and cypress with storybook test`)

Mirrors main's 9c116d2c:

jest → vitest in packages/ui (jsdom per test file, vitest-axe, @testing-library/jest-dom/vitest); @sanity/ui is aliased to source so unit tests need no build
Storybook 8.6 → 10 with @storybook/addon-vitest: every story runs as a browser smoke test in headless Chromium (playwright)
cypress → storybook test: all 8 cypress e2e specs ported to story play functions and apps/storybook/tests/ viewport/browser tests; cypress fully removed; CI cypress job replaced with a storybook-test job (cached playwright browser)
vitest pinned to 4.1.9 (4.1.10 has an inline-snapshot regression) with a vite@^7 devDependency in packages/ui so vitest doesn't dedupe onto vite 6

3. Workshop folded into Storybook (`refactor: fold the workshop into Storybook`)

Mirrors main's c051b4e4:

Adopts main's Storybook stories that fold in the workshop fixtures: richer component stories plus new hooks/, theme/, and utils/ sidebar sections (UseElementRect, UseMediaIndex, BoundaryElement, ElementQuery, Layer, Portal, VirtualList, theme Debug/Build/Canvas/Color) and a shared options.ts
Stories adapted to the v2 component API where main's used v3-only features (space instead of gap argTypes, column/row grid-item props, ButtonProps, no polymorphic as-prop inference)
Deletes every src/**/__workshop__ directory, the workshop tooling (workshop.config.ts, workshop.runtime.ts, fonts plugin, workshop-env.d.ts) and the @sanity/ui-workshop dependency; autocomplete __mocks__ move into the Storybook app
Removes the workshop deploy configs (root vercel.json, packages/ui/vercel.json); pnpm dev now starts Storybook only

Demo

workshop_stories_in_storybook_demo.mp4

Former workshop content in Storybook: UseElementRect hook demo, VirtualList, Layer z-offset debug, theme Debug and Build stories, and the new HOOKS / UTILS / THEME sidebar sections.

Sidebar with hooks, utils, theme sections

Earlier demos: storybook10_vitest_play_tests_demo.mp4 (Storybook 10 + vitest addon play tests) and storybook_and_workshop_monorepo_demo.mp4 (initial monorepo restructure).

Testing

✅ pnpm test — 28 vitest suites, 79 unit tests pass (no build needed)
✅ pnpm test:browser — 55 files, 239 browser tests pass (every story as a smoke test incl. the folded-in workshop stories, play functions, viewport tests)
✅ pnpm build (@sanity/ui + figma plugin), pnpm storybook:build (Storybook 10)
✅ pnpm ts:check, pnpm lint --max-warnings 0, pnpm exec prettier --check .
✅ pnpm install --frozen-lockfile
✅ pnpm --filter @sanity/ui exec semantic-release --dry-run (config loads from packages/ui)
✅ Manual GUI verification of the new hooks/theme/utils stories and interaction tests (videos above)

_{To show artifacts inline, enable in settings.}

Move the published @sanity/ui package from the repo root into packages/ui, the Figma plugin into packages/figma, and Storybook into apps/storybook, mirroring the monorepo layout on the main branch. The repo root becomes a private workspace root (sanity-ui-monorepo) that orchestrates via pnpm filters. - semantic-release now runs from packages/ui (release config and CHANGELOG moved along with the package) - eslint configs are now per-package (packages/ui and apps/storybook) - stories import @sanity/ui sources from packages/ui; the storybook app is a private workspace package with its own vercel.json - cypress e2e stays at the root and keeps testing the workshop build; the root workshop:build copies packages/ui/dist into dist/ so the existing Vercel setup and CI keep working, and packages/ui gets its own vercel.json for deploys rooted at the package - pnpm overrides now use literal versions (previously $-references to root devDependencies which no longer exist)

changeset-bot · 2026-07-06T10:58:30Z

⚠️ No Changeset found

Latest commit: c6f6e73

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2026-07-06T10:58:32Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sanity-ui-storybook	Ready	Preview, Comment	Jul 6, 2026 12:07pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
sanity-ui-workshop	Ignored		Jul 6, 2026 12:07pm

…t addon) Mirror the testing setup from the main branch: - packages/ui unit tests now run with vitest (jsdom, vitest-axe, @testing-library/jest-dom/vitest). The vitest config aliases @sanity/ui to the package source, so tests no longer require a build first. - Storybook is upgraded from 8.6 to 10 and gains @storybook/addon-vitest: every story runs as a browser smoke test in headless Chromium (playwright), and the cypress e2e specs are ported to story play functions (Autocomplete, MenuButton, Dialog, Tab, TextInput, Layer) and viewport-controlled browser tests in apps/storybook/tests/ (Box, Grid, Layer z-offset, MenuButton tab behavior). - The mdx-only pages (Colors, FocusRings, Tones, README) are converted to regular stories / markdown, matching main. - cypress is removed entirely (specs, config, root deps and scripts); the CI cypress job is replaced with a storybook-test job that installs and caches the playwright chromium browser and runs pnpm test:browser. The unit test job no longer needs a build step. - vitest is pinned to 4.1.9 (4.1.10 has an inline snapshot regression), and packages/ui gets a vite ^7 devDependency so vitest resolves vite 7 rather than deduping onto the workshop's vite 6, which breaks inline snapshot state in multi-file runs.

socket-security · 2026-07-06T11:40:23Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Package	Supply Chain Security	Vulnerability
npm/@storybook/react-vite@10.4.6
npm/@storybook/addon-vitest@10.4.6
npm/@storybook/addon-a11y@10.4.6
npm/vitest@4.1.9
npm/vitest-axe@1.0.0-pre.5
npm/playwright@1.61.1
github/actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830
npm/jsdom@29.1.1
npm/vite@5.4.21 ⏵ 7.3.6	⁺⁵	⁺¹⁹
npm/@vitest/browser-playwright@4.1.9
npm/storybook@10.4.6
npm/vitest-browser-react@2.2.0
npm/@storybook/addon-themes@10.4.6
npm/eslint-plugin-storybook@10.4.6
npm/@storybook/addon-docs@10.4.6
npm/@storybook/addon-links@10.4.6

View full report

socket-security · 2026-07-06T11:40:24Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		Obfuscated code: npm `@emnapi/runtime` is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: pnpm-lock.yaml → `npm/storybook@10.4.6` → `npm/@sanity/pkg-utils@8.1.29` → `npm/@emnapi/runtime@1.11.1` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/@emnapi/runtime@1.11.1`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm `css-tree` is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: pnpm-lock.yaml → `npm/jsdom@29.1.1` → `npm/css-tree@3.2.1` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/css-tree@3.2.1`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm `data-urls` is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: pnpm-lock.yaml → `npm/jsdom@29.1.1` → `npm/data-urls@7.0.0` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/data-urls@7.0.0`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm `jsdom` is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: packages/ui/package.json → `npm/jsdom@29.1.1` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/jsdom@29.1.1`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm `jsdom` is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: packages/ui/package.json → `npm/jsdom@29.1.1` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/jsdom@29.1.1`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

Mirror main's move of the workshop into the Storybook app: - Adopt the Storybook stories from main that fold in the workshop fixtures (richer component stories plus new hooks/, theme/, utils/ sections and a shared options.ts), adapted to the v2 component API (space instead of the v3-only gap argType, column/row grid item props, ButtonProps, no polymorphic as-prop inference) - Delete every src/**/__workshop__ directory and the workshop tooling (workshop.config.ts, workshop.runtime.ts, the fonts plugin, workshop-env.d.ts) and drop the @sanity/ui-workshop dependency - Move the autocomplete __mocks__ used by stories into apps/storybook - Remove the workshop deploy configs (root vercel.json and packages/ui/vercel.json); the Storybook app keeps its own vercel.json - pnpm dev now starts Storybook only; the workshop:* scripts, http-server and npm-run-all2 root deps are gone

vercel Bot deployed to Preview – sanity-ui-storybook July 6, 2026 10:58 View deployment

vercel Bot deployed to Preview – sanity-ui-storybook July 6, 2026 11:40 View deployment

stipsan marked this pull request as ready for review July 6, 2026 11:46

cursor Bot changed the title ~~refactor: structure v2 as a pnpm monorepo matching main~~ refactor: structure v2 as a pnpm monorepo matching main (vitest + storybook test) Jul 6, 2026

vercel Bot deployed to Preview – sanity-ui-storybook July 6, 2026 12:07 View deployment

cursor Bot changed the title ~~refactor: structure v2 as a pnpm monorepo matching main (vitest + storybook test)~~ refactor: align v2 with main's monorepo structure and tooling (vitest, storybook test, workshop folded in) Jul 6, 2026

stipsan merged commit bb3ca92 into v2 Jul 6, 2026
13 checks passed

stipsan deleted the cursor/v2-monorepo-structure-1bdb branch July 6, 2026 13:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: align v2 with main's monorepo structure and tooling (vitest, storybook test, workshop folded in)#2265

refactor: align v2 with main's monorepo structure and tooling (vitest, storybook test, workshop folded in)#2265
stipsan merged 3 commits into
v2from
cursor/v2-monorepo-structure-1bdb

stipsan commented Jul 6, 2026 •

edited by cursor Bot

Loading

Uh oh!

changeset-bot Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

socket-security Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

socket-security Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

stipsan commented Jul 6, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

1. Monorepo structure (refactor: structure as a pnpm monorepo matching main)

2. Testing modernization (test: replace jest with vitest and cypress with storybook test)

3. Workshop folded into Storybook (refactor: fold the workshop into Storybook)

Demo

Testing

Uh oh!

changeset-bot Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

stipsan commented Jul 6, 2026 •

edited by cursor Bot

Loading

1. Monorepo structure (`refactor: structure as a pnpm monorepo matching main`)

2. Testing modernization (`test: replace jest with vitest and cypress with storybook test`)

3. Workshop folded into Storybook (`refactor: fold the workshop into Storybook`)

changeset-bot Bot commented Jul 6, 2026 •

edited

Loading

vercel Bot commented Jul 6, 2026 •

edited

Loading

socket-security Bot commented Jul 6, 2026 •

edited

Loading

socket-security Bot commented Jul 6, 2026 •

edited

Loading