feat!: use UI v4

Author: stipsan

.github/workflows/main.yml

@@ -24,7 +24,7 @@ jobs:
           - platform: macos-latest
             node-version: lts/*
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
@@ -44,7 +44,7 @@ jobs:
     needs: test
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           # Need to fetch entire commit history to
           # analyze every commit since last release

.github/workflows/react-compiler.yml

@@ -17,7 +17,7 @@ jobs:
     name: Should React Compiler dependencies be updated? 🤔
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:

CHANGELOG.md

@@ -5,6 +5,87 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.0-static.1](https://github.com/sanity-io/ui-workshop/compare/v3.3.0...v4.0.0-static.1) (2025-10-15)
+
+### ⚠ BREAKING CHANGES
+
+- use UI v4
+
+### Features
+
+- use UI v4 ([1b3dbc9](https://github.com/sanity-io/ui-workshop/commit/1b3dbc9316c9d7851e411ada1cb8a2231b68fd4f))
+
+## [4.0.0-static.11](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.10...v4.0.0-static.11) (2025-08-07)
+
+### Bug Fixes
+
+- simplify media queries ([62055fc](https://github.com/sanity-io/ui-workshop/commit/62055fc645ed7a948b7ae45812868f663a82edd8))
+
+## [4.0.0-static.10](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.9...v4.0.0-static.10) (2025-08-07)
+
+### Bug Fixes
+
+- **deps:** Update dependency @vitejs/plugin-react to v5 ([#191](https://github.com/sanity-io/ui-workshop/issues/191)) ([2013988](https://github.com/sanity-io/ui-workshop/commit/2013988fc5c35bef682bce0817933cd6fa3dc4dc))
+
+## [4.0.0-static.9](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.8...v4.0.0-static.9) (2025-08-07)
+
+### Bug Fixes
+
+- stable bg color ([7e7cadd](https://github.com/sanity-io/ui-workshop/commit/7e7cadd203f73657b123497e172a4feafe88f675))
+
+## [4.0.0-static.8](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.7...v4.0.0-static.8) (2025-08-07)
+
+### Bug Fixes
+
+- stable border colors ([369621e](https://github.com/sanity-io/ui-workshop/commit/369621ed0ec49c8cb60ca63007d81a0d13992464))
+
+## [4.0.0-static.7](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.6...v4.0.0-static.7) (2025-08-07)
+
+### Features
+
+- allow configuring vanilla extract ([0124dbf](https://github.com/sanity-io/ui-workshop/commit/0124dbfb244aa819904dbfd8a93a035535880ba3))
+- use lightningcss to minify css ([7322fd7](https://github.com/sanity-io/ui-workshop/commit/7322fd7f5b3cea51079bf90bb23051682f51940f))
+
+## [4.0.0-static.6](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.5...v4.0.0-static.6) (2025-08-06)
+
+### Bug Fixes
+
+- allow overflow on body ([742c451](https://github.com/sanity-io/ui-workshop/commit/742c451ebad9eca2a94c2352f063d0c192cf5e74))
+
+## [4.0.0-static.5](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.4...v4.0.0-static.5) (2025-08-06)
+
+### Bug Fixes
+
+- provide fallback colors ([0c47af3](https://github.com/sanity-io/ui-workshop/commit/0c47af39e82c983a9fdebf6de13a6b5a788627fd))
+
+## [4.0.0-static.4](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.3...v4.0.0-static.4) (2025-08-06)
+
+### Bug Fixes
+
+- add back meta tags ([cfbf5bb](https://github.com/sanity-io/ui-workshop/commit/cfbf5bb61124ce6286fd04a300a178d5cdc3af6c))
+
+## [4.0.0-static.3](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.2...v4.0.0-static.3) (2025-08-06)
+
+### Bug Fixes
+
+- workaround workshop.runtime.ts css import regression ([bebacee](https://github.com/sanity-io/ui-workshop/commit/bebaceed85a572a414f735ac063666188f4ec774))
+
+## [4.0.0-static.2](https://github.com/sanity-io/ui-workshop/compare/v4.0.0-static.1...v4.0.0-static.2) (2025-08-06)
+
+### Bug Fixes
+
+- minor cleanup ([9e1bf79](https://github.com/sanity-io/ui-workshop/commit/9e1bf794cf27c3c0e88da9d4b9ecd66cf88e5958))
+
+## [4.0.0-static.1](https://github.com/sanity-io/ui-workshop/compare/v3.3.0...v4.0.0-static.1) (2025-08-06)
+
+### ⚠ BREAKING CHANGES
+
+- use UI v4
+
+### Features
+
+- use UI v4 ([819b1c2](https://github.com/sanity-io/ui-workshop/commit/819b1c2803d8a251ae33c7a7c2267b6161da2f4d))
+
 ## [3.3.0](https://github.com/sanity-io/ui-workshop/compare/v3.2.0...v3.3.0) (2025-08-06)
 
 ### Features

README.md

@@ -88,85 +88,6 @@ function TestStory() {
 }
 ```
 
-## Styling
-
-In addition to the [CSS features that `vite` supports](https://vite.dev/guide/features.html#css), you can also use [Vanilla Extract](https://vanilla-extract.style/) for styling.
-
-First install the `@vanilla-extract/css` package:
-
-```sh
-npm install @vanilla-extract/css
-```
-
-Then, add a `style.css.ts` file for your workshop:
-
-```ts
-// src/__workshop__/style.css.ts
-
-import {style} from '@vanilla-extract/css'
-
-export const container = style({
-  display: 'grid',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: '100%',
-  width: '100%',
-})
-```
-
-And finally, import the `container` className and use it in your workshop:
-
-```diff
-import {
-  defineScope,
-  useBoolean,
-  useNumber,
-  useSelect,
-  useString,
-  useText,
-} from '@sanity/ui-workshop'
-+import {container} from './style.css'
-
-export default defineScope({
-  name: 'test',
-  title: 'Test',
-  stories: [
-    {
-      name: 'test',
-      title: 'Test',
-      component: TestStory,
-    },
-  ],
-})
-
-const options = {
-  None: '',
-  Small: 'sm',
-  Medium: 'md',
-  Large: 'lg',
-}
-
-function TestStory() {
-  const text = useText('Text', 'Hello, world')
-  const boolean = useBoolean('Boolean', true)
-  const number = useNumber('Number', 1234)
-  const string = useString('String', '...')
-  const option = useSelect('Select option', options)
-
-  return (
--    <div>
-+    <div className={container}>
-      <h1>This is my first story.</h1>
-      <p>Some text: {text}</p>
-      <p>A boolean: {boolean ? 'true' : 'false'}</p>
-      <p>A number: {number}</p>
-      <p>A string: {string}</p>
-      <p>An option: {option}</p>
-    </div>
-  )
-}
-```
-
 ## License
 
 [MIT](LICENSE)

package.config.ts

@@ -7,6 +7,12 @@ export default defineConfig({
       import: './dist/cli.js',
       runtime: 'node',
     },
+    {
+      // Working around workshop.runtime.ts files importing `defineRuntime` that points to a file that has CSS imports, which nodejs doesn't support
+      source: './exports/index.ts',
+      import: './dist/index.node.js',
+      runtime: 'node',
+    },
   ],
   extract: {
     rules: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui-workshop",
-  "version": "3.3.0",
+  "version": "4.0.0-static.1",
   "keywords": [
     "sanity",
     "ui",
@@ -27,6 +27,9 @@
   "exports": {
     ".": {
       "source": "./exports/index.ts",
+      "node": {
+        "default": "./dist/index.node.js"
+      },
       "default": "./dist/index.js"
     },
     "./plugin-a11y": {
@@ -112,37 +115,38 @@
     "@vanilla-extract/css-utils": "^0.1.6",
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^4.7.0",
-    "axe-core": "^4.10.3",
+    "@vitejs/plugin-react": "^5.0.4",
+    "axe-core": "^4.11.0",
     "cac": "^6.7.14",
     "chokidar": "^3.6.0",
     "cpx": "^1.5.0",
     "dotenv-flow": "^4.1.0",
-    "esbuild": "^0.25.8",
+    "esbuild": "^0.25.11",
     "esbuild-register": "^3.6.0",
     "express": "^5.1.0",
     "globby": "^11.1.0",
+    "lightningcss": "^1.30.2",
     "lodash": "^4.17.21",
     "mkdirp": "^2.1.6",
     "pako": "^2.1.0",
     "rimraf": "^4.4.1",
     "segmented-property": "^4.0.0",
-    "vite": "^7.0.6"
+    "vite": "^7.1.10"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^19.8.1",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^7.11.1",
+    "@sanity/pkg-utils": "^8.1.21",
     "@sanity/prettier-config": "^1.0.6",
     "@sanity/semantic-release-preset": "^4.1.8",
-    "@sanity/ui": "^3.0.5",
+    "@sanity/ui": "4.0.0-static.38",
     "@types/cpx": "^1.5.5",
     "@types/express": "^5.0.3",
     "@types/lodash": "^4.17.20",
-    "@types/node": "^20.17.9",
-    "@types/pako": "^2.0.3",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
+    "@types/node": "^20.19.21",
+    "@types/pako": "^2.0.4",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
@@ -161,16 +165,16 @@
     "jsdom": "^22.1.0",
     "npm-run-all2": "^6.2.6",
     "prettier": "^3.6.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-is": "^19.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-is": "^19.2.0",
     "semantic-release": "^23.1.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.9.2",
+    "typescript": "5.9.3",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "@sanity/ui": "^3",
+    "@sanity/ui": "^4.0.0-0",
     "react": "^19",
     "react-dom": "^19"
   },