feat!: use UI v4

Author: stipsan

.changeset/deep-cameras-matter.md

@@ -0,0 +1,5 @@
+---
+'@sanity/ui-workshop': patch
+---
+
+Update react compiler to v1

.changeset/pre.json

@@ -0,0 +1,10 @@
+{
+  "mode": "pre",
+  "tag": "static",
+  "initialVersions": {
+    "@sanity/ui-workshop": "4.0.0-static.11"
+  },
+  "changesets": [
+    "deep-cameras-matter"
+  ]
+}

.github/workflows/main.yml

@@ -5,6 +5,7 @@ on:
   pull_request:
     branches:
       - main
+      - static
 
 permissions:
   contents: read # for checkout

.github/workflows/release.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - static
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

CHANGELOG.md

@@ -1,9 +1,22 @@
+<!-- markdownlint-disable --><!-- textlint-disable -->
+
+## 4.0.0-static.12
+
+### Patch Changes
+
+- [#185](https://github.com/sanity-io/ui-workshop/pull/185) [`4cc0738`](https://github.com/sanity-io/ui-workshop/commit/4cc0738310247e908ad94d29c03554c16248b8df) Thanks [@stipsan](https://github.com/stipsan)! - Update react compiler to v1
+
 ## 3.4.0
 
 ### Minor Changes
 
 - [`b1f9eea`](https://github.com/sanity-io/ui-workshop/commit/b1f9eeaab4bb016cbd867e9c0dff91cd9af293af) Thanks [@stipsan](https://github.com/stipsan)! - Upgrade React Compiler to v1
 
+# 📓 Changelog
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.3.2](https://github.com/sanity-io/ui-workshop/compare/v3.3.1...v3.3.2) (2025-08-07)
 
 ### Bug Fixes

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.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui-workshop",
-  "version": "3.4.0",
+  "version": "4.0.0-static.12",
   "keywords": [
     "sanity",
     "ui",
@@ -108,6 +108,7 @@
     "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",
@@ -121,7 +122,7 @@
     "@sanity/browserslist-config": "^1.0.5",
     "@sanity/pkg-utils": "^8.1.21",
     "@sanity/prettier-config": "^2.0.1",
-    "@sanity/ui": "^3.1.10",
+    "@sanity/ui": "4.0.0-static.38",
     "@types/cpx": "^1.5.5",
     "@types/express": "^5.0.3",
     "@types/lodash": "^4.17.20",
@@ -153,7 +154,7 @@
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "@sanity/ui": "^3",
+    "@sanity/ui": "^4.0.0-0",
     "react": "^19",
     "react-dom": "^19"
   },