From cf4f47ab3410d63b41c1b1818024476469f03f56 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Tue, 5 Aug 2025 21:24:43 +0200 Subject: [PATCH 1/2] feat!: use UI v4 --- .changeset/deep-cameras-matter.md | 5 + .changeset/pre.json | 10 ++ .github/workflows/main.yml | 1 + .github/workflows/release.yml | 1 + CHANGELOG.md | 13 ++ README.md | 79 ---------- package.json | 7 +- pnpm-lock.yaml | 117 ++------------- src/__workshop__/index.tsx | 14 +- src/core/GlobalStyle.ts | 18 --- src/core/Workshop.tsx | 74 ++++------ src/core/WorkshopCanvas.tsx | 2 +- src/core/WorkshopContext.ts | 4 +- src/core/WorkshopProvider.tsx | 6 +- src/core/config/types.ts | 2 - src/core/frame/WorkshopCanvas.tsx | 11 +- src/core/frame/WorkshopFrame.tsx | 51 +++---- src/core/helpers.ts | 4 +- src/core/inspector/InspectorHeader.tsx | 8 +- src/core/inspector/WorkshopInspector.tsx | 3 + src/core/inspector/types.ts | 7 +- src/core/mount.tsx | 34 +++-- src/core/mountFrame.tsx | 30 ++-- src/core/navbar/NavbarBreadcrumbs.tsx | 6 +- src/core/navbar/OpenCanvasButton.tsx | 30 +++- src/core/navbar/WorkshopNavbar.tsx | 8 +- src/core/navigator/SearchResults.tsx | 4 +- src/core/navigator/StoryTree.tsx | 2 +- src/core/navigator/WorkshopNavigator.tsx | 27 ++-- .../plugins/props/components/booleanProp.tsx | 4 +- src/core/runtime/types.ts | 2 + src/core/styles.css.ts | 137 +++++------------- src/core/types/msg.ts | 4 +- src/core/types/state.ts | 4 +- src/plugin-a11y/A11yInspector.tsx | 11 +- src/plugin-a11y/A11yProvider.tsx | 4 +- src/plugin-a11y/index.ts | 2 +- src/plugin-perf/PerfInspector.tsx | 8 +- src/plugin-perf/PerfProvider.tsx | 8 +- src/plugin-perf/index.ts | 2 +- src/plugin-perf/perfReducer.ts | 6 +- src/runtime/build.ts | 7 +- src/runtime/devServer/createDevServer.ts | 2 +- src/runtime/runtime/_writeFrameHTML.ts | 1 - src/runtime/runtime/_writeFrameScript.ts | 1 - src/runtime/runtime/_writeHTML.ts | 1 - src/runtime/runtime/_writeScript.ts | 1 - src/runtime/viteConfig.ts | 9 +- tsconfig.settings.json | 1 + 49 files changed, 291 insertions(+), 502 deletions(-) create mode 100644 .changeset/deep-cameras-matter.md create mode 100644 .changeset/pre.json delete mode 100644 src/core/GlobalStyle.ts diff --git a/.changeset/deep-cameras-matter.md b/.changeset/deep-cameras-matter.md new file mode 100644 index 00000000..2c53a82b --- /dev/null +++ b/.changeset/deep-cameras-matter.md @@ -0,0 +1,5 @@ +--- +'@sanity/ui-workshop': patch +--- + +Update react compiler to v1 diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000..ce8bb456 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,10 @@ +{ + "mode": "pre", + "tag": "static", + "initialVersions": { + "@sanity/ui-workshop": "4.0.0-static.11" + }, + "changesets": [ + "deep-cameras-matter" + ] +} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index be54cdef..d77f3541 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -5,6 +5,7 @@ on: pull_request: branches: - main + - static permissions: contents: read # for checkout diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index fa3c16c7..78229cef 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -4,6 +4,7 @@ on: push: branches: - main + - static concurrency: ${{ github.workflow }}-${{ github.ref }} diff --git a/CHANGELOG.md b/CHANGELOG.md index 263bbab8..da422286 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,22 @@ + + +## 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 diff --git a/README.md b/README.md index 2e147349..93a98b04 100644 --- a/README.md +++ b/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 ( --
-+
-

This is my first story.

-

Some text: {text}

-

A boolean: {boolean ? 'true' : 'false'}

-

A number: {number}

-

A string: {string}

-

An option: {option}

-
- ) -} -``` - ## License [MIT](LICENSE) diff --git a/package.json b/package.json index 5d45ab19..9e879022 100644 --- a/package.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c036104..38f2246a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,6 +53,9 @@ importers: globby: specifier: ^11.1.0 version: 11.1.0 + lightningcss: + specifier: ^1.30.2 + version: 1.30.2 lodash: specifier: ^4.17.21 version: 4.17.21 @@ -88,8 +91,8 @@ importers: specifier: ^2.0.1 version: 2.0.1(prettier@3.6.2) '@sanity/ui': - specifier: ^3.1.10 - version: 3.1.10(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.0)(react@19.2.0)(styled-components@6.1.19(react-dom@19.2.0(react@19.2.0))(react@19.2.0)) + specifier: 4.0.0-static.38 + version: 4.0.0-static.38(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.0)(react@19.2.0) '@types/cpx': specifier: ^1.5.5 version: 1.5.5 @@ -404,9 +407,6 @@ packages: '@emotion/memoize@0.8.1': resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} - '@emotion/unitless@0.8.1': - resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} - '@esbuild/aix-ppc64@0.25.11': resolution: {integrity: sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==} engines: {node: '>=18'} @@ -1151,14 +1151,13 @@ packages: peerDependencies: prettier: ^3.6.2 - '@sanity/ui@3.1.10': - resolution: {integrity: sha512-iwhImz9I0nHAj48yKsTGCMOGL+ZDnljvFLxZbvQkzUDwL42UH+JNeo1m/K3fYyRVb6w9SkvpaSyBf2GhFiAVyg==} + '@sanity/ui@4.0.0-static.38': + resolution: {integrity: sha512-99qhMYfSn19lNLIIoXQjLuE+Oyy8qbUwrce5OkdsXi09LtU4yaj57j//vm1QAtB2l00NJcfY0WMwGFLYY/2pAA==} engines: {node: '>=20.19 <22 || >=22.12'} peerDependencies: - react: ^18 || >=19.0.0-0 - react-dom: ^18 || >=19.0.0-0 - react-is: ^18 || >=19.0.0-0 - styled-components: ^5.2 || ^6 + react: ^19 + react-dom: ^19 + react-is: ^19 '@sindresorhus/merge-streams@4.0.0': resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==} @@ -1267,9 +1266,6 @@ packages: '@types/serve-static@1.15.8': resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==} - '@types/stylis@4.2.5': - resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} - '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} @@ -1697,9 +1693,6 @@ packages: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} - camelize@1.0.1: - resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} - caniuse-lite@1.0.30001750: resolution: {integrity: sha512-cuom0g5sdX6rw00qOoLNSFCJ9/mYIsuSOA+yzpDw8eopiFqcVwQvZHqov0vmEighRxX++cfC0Vg1G+1Iy/mSpQ==} @@ -1828,13 +1821,6 @@ packages: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} - css-color-keywords@1.0.0: - resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} - engines: {node: '>=4'} - - css-to-react-native@3.2.0: - resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} - css-what@6.2.2: resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==} engines: {node: '>= 6'} @@ -3578,13 +3564,6 @@ packages: resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==} engines: {node: '>= 0.4'} - postcss-value-parser@4.2.0: - resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - - postcss@8.4.49: - resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} - engines: {node: ^10 || ^12 || >=14} - postcss@8.5.6: resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==} engines: {node: ^10 || ^12 || >=14} @@ -3685,11 +3664,6 @@ packages: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true - react-compiler-runtime@1.0.0: - resolution: {integrity: sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==} - peerDependencies: - react: ^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental - react-dom@19.2.0: resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==} peerDependencies: @@ -3975,9 +3949,6 @@ packages: setprototypeof@1.2.0: resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==} - shallowequal@1.1.0: - resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} - shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -4169,16 +4140,6 @@ packages: strip-literal@3.0.0: resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==} - styled-components@6.1.19: - resolution: {integrity: sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==} - engines: {node: '>= 16'} - peerDependencies: - react: '>= 16.8.0' - react-dom: '>= 16.8.0' - - stylis@4.3.2: - resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==} - subarg@1.0.0: resolution: {integrity: sha512-RIrIdRY0X1xojthNcVtgT9sjpOGagEUKpZdgBUi054OEPFo282yg+zE+t1Rj3+RqKq2xStL7uUHhY+AjbC4BXg==} @@ -4289,9 +4250,6 @@ packages: resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==} engines: {node: '>=6'} - tslib@2.6.2: - resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} - tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} @@ -5002,10 +4960,10 @@ snapshots: '@emotion/is-prop-valid@1.2.2': dependencies: '@emotion/memoize': 0.8.1 + optional: true - '@emotion/memoize@0.8.1': {} - - '@emotion/unitless@0.8.1': {} + '@emotion/memoize@0.8.1': + optional: true '@esbuild/aix-ppc64@0.25.11': optional: true @@ -5638,20 +5596,19 @@ snapshots: prettier: 3.6.2 prettier-plugin-packagejson: 2.5.19(prettier@3.6.2) - '@sanity/ui@3.1.10(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.0)(react@19.2.0)(styled-components@6.1.19(react-dom@19.2.0(react@19.2.0))(react@19.2.0))': + '@sanity/ui@4.0.0-static.38(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react-is@19.2.0)(react@19.2.0)': dependencies: '@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0) '@juggle/resize-observer': 3.4.0 '@sanity/color': 3.0.6 '@sanity/icons': 3.7.4(react@19.2.0) + '@vanilla-extract/dynamic': 2.1.5 csstype: 3.1.3 framer-motion: 12.23.24(@emotion/is-prop-valid@1.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react: 19.2.0 - react-compiler-runtime: 1.0.0(react@19.2.0) react-dom: 19.2.0(react@19.2.0) react-is: 19.2.0 react-refractor: 4.0.0(react@19.2.0) - styled-components: 6.1.19(react-dom@19.2.0(react@19.2.0))(react@19.2.0) use-effect-event: 2.0.3(react@19.2.0) transitivePeerDependencies: - '@emotion/is-prop-valid' @@ -5777,8 +5734,6 @@ snapshots: '@types/node': 20.19.21 '@types/send': 0.17.5 - '@types/stylis@4.2.5': {} - '@types/unist@2.0.11': {} '@types/unist@3.0.3': {} @@ -6348,8 +6303,6 @@ snapshots: callsites@3.1.0: {} - camelize@1.0.1: {} - caniuse-lite@1.0.30001750: {} chai@5.2.1: @@ -6491,14 +6444,6 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 - css-color-keywords@1.0.0: {} - - css-to-react-native@3.2.0: - dependencies: - camelize: 1.0.1 - css-color-keywords: 1.0.0 - postcss-value-parser: 4.2.0 - css-what@6.2.2: {} cssesc@3.0.0: {} @@ -8426,14 +8371,6 @@ snapshots: possible-typed-array-names@1.1.0: {} - postcss-value-parser@4.2.0: {} - - postcss@8.4.49: - dependencies: - nanoid: 3.3.11 - picocolors: 1.1.1 - source-map-js: 1.2.1 - postcss@8.5.6: dependencies: nanoid: 3.3.11 @@ -8527,10 +8464,6 @@ snapshots: minimist: 1.2.8 strip-json-comments: 2.0.1 - react-compiler-runtime@1.0.0(react@19.2.0): - dependencies: - react: 19.2.0 - react-dom@19.2.0(react@19.2.0): dependencies: react: 19.2.0 @@ -8901,8 +8834,6 @@ snapshots: setprototypeof@1.2.0: {} - shallowequal@1.1.0: {} - shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 @@ -9128,22 +9059,6 @@ snapshots: dependencies: js-tokens: 9.0.1 - styled-components@6.1.19(react-dom@19.2.0(react@19.2.0))(react@19.2.0): - dependencies: - '@emotion/is-prop-valid': 1.2.2 - '@emotion/unitless': 0.8.1 - '@types/stylis': 4.2.5 - css-to-react-native: 3.2.0 - csstype: 3.1.3 - postcss: 8.4.49 - react: 19.2.0 - react-dom: 19.2.0(react@19.2.0) - shallowequal: 1.1.0 - stylis: 4.3.2 - tslib: 2.6.2 - - stylis@4.3.2: {} - subarg@1.0.0: dependencies: minimist: 1.2.8 @@ -9250,8 +9165,6 @@ snapshots: minimist: 1.2.8 strip-bom: 3.0.0 - tslib@2.6.2: {} - tslib@2.8.1: {} tsx@4.20.6: diff --git a/src/__workshop__/index.tsx b/src/__workshop__/index.tsx index 5d6147de..e25489ff 100644 --- a/src/__workshop__/index.tsx +++ b/src/__workshop__/index.tsx @@ -36,13 +36,13 @@ function TestStory() { return ( - - This is my first story. - Some text: {text} - A boolean: {boolean ? 'true' : 'false'} - A number: {number} - A string: {string} - An option: {option} + + This is my first story. + Some text: {text} + A boolean: {boolean ? 'true' : 'false'} + A number: {number} + A string: {string} + An option: {option} ) diff --git a/src/core/GlobalStyle.ts b/src/core/GlobalStyle.ts deleted file mode 100644 index fccd143e..00000000 --- a/src/core/GlobalStyle.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {useRootTheme} from '@sanity/ui' -import {setElementVars} from '@vanilla-extract/dynamic' -import {useInsertionEffect} from 'react' - -import {bodyBackgroundColor} from '#styles' - -export function GlobalStyle(): null { - const {scheme, theme} = useRootTheme() - const bg = theme.v2!.color[scheme].default.bg! - - useInsertionEffect(() => { - setElementVars(document.body, { - [bodyBackgroundColor]: bg, - }) - }, [bg]) - - return null -} diff --git a/src/core/Workshop.tsx b/src/core/Workshop.tsx index b39a0fdc..e39b9929 100644 --- a/src/core/Workshop.tsx +++ b/src/core/Workshop.tsx @@ -1,15 +1,11 @@ -import { - BoundaryElementProvider, - Flex, - PortalProvider, - ThemeColorSchemeKey, - ToastProvider, - useMediaIndex, -} from '@sanity/ui' +import {Flex, useMediaIndex} from '@sanity/ui' +import type {ColorScheme} from '@sanity/ui/theme' import {debounce} from 'lodash' import {isEqual} from 'lodash' import {memo, startTransition, useCallback, useEffect, useMemo, useRef, useState} from 'react' +import {workshopLayout} from '#styles' + import {WorkshopConfig} from './config' import {DEFAULT_VIEWPORT_VALUE, DEFAULT_ZOOM_VALUE} from './constants' import {WorkshopInspector} from './inspector' @@ -27,13 +23,13 @@ import {workshopReducer} from './workshopReducer' export interface WorkshopProps { config: WorkshopConfig locationStore: WorkshopLocationStore - onSchemeChange: (nextScheme: ThemeColorSchemeKey) => void - scheme?: ThemeColorSchemeKey + onSchemeChange: (nextScheme: ColorScheme) => void + scheme?: ColorScheme } function getStateFromLocation( loc: Omit, - schemeProp?: ThemeColorSchemeKey, + schemeProp?: ColorScheme, frameReady?: boolean, ): WorkshopState { const path = loc.path @@ -44,7 +40,7 @@ function getStateFromLocation( frameReady: frameReady || false, path, payload, - scheme: schemeProp || (typeof scheme === 'string' ? (scheme as ThemeColorSchemeKey) : 'light'), + scheme: schemeProp || (typeof scheme === 'string' ? (scheme as ColorScheme) : 'light'), viewport: typeof viewport === 'string' ? viewport : 'auto', zoom: typeof zoom === 'number' ? zoom : 1, } @@ -86,8 +82,6 @@ export const Workshop = memo(function Workshop(props: WorkshopProps): React.Reac const withNavbar = config.features?.navbar ?? true const channel = useMemo(() => createPubsub(), []) const frame = useMemo(() => createWorkshopFrameController(), []) - const [boundaryElement, setBoundaryElement] = useState(null) - const [portalElement, setPortalElement] = useState(null) const [{frameReady, path, payload, scheme, viewport, zoom}, setState] = useState( () => getStateFromLocation(locationStore.get(), schemeProp), ) @@ -245,39 +239,25 @@ export const Workshop = memo(function Workshop(props: WorkshopProps): React.Reac viewport={viewport} zoom={zoom} > - - - - - {withNavbar && ( - - )} - - - - - -
- - - - + + {withNavbar && ( + + )} + + + + + ) }) diff --git a/src/core/WorkshopCanvas.tsx b/src/core/WorkshopCanvas.tsx index 1ca80c7b..52e1e1da 100644 --- a/src/core/WorkshopCanvas.tsx +++ b/src/core/WorkshopCanvas.tsx @@ -34,7 +34,7 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: { {path === '/' && ( - + {title} Browse workshop stories in the navigator to the left. diff --git a/src/core/WorkshopContext.ts b/src/core/WorkshopContext.ts index 95157950..d0fe8eb8 100644 --- a/src/core/WorkshopContext.ts +++ b/src/core/WorkshopContext.ts @@ -1,4 +1,4 @@ -import {ThemeColorSchemeKey} from '@sanity/ui' +import type {ColorScheme} from '@sanity/ui/theme' import {createContext} from 'react' import {WorkshopCollection, WorkshopPlugin, WorkshopScope, WorkshopStory} from './config' @@ -16,7 +16,7 @@ export interface WorkshopContextValue { origin: 'frame' | 'main' path: string payload: Record - scheme: ThemeColorSchemeKey + scheme: ColorScheme scope: WorkshopScope | null scopes: WorkshopScope[] story: WorkshopStory | null diff --git a/src/core/WorkshopProvider.tsx b/src/core/WorkshopProvider.tsx index b4b0f7f1..94915bab 100644 --- a/src/core/WorkshopProvider.tsx +++ b/src/core/WorkshopProvider.tsx @@ -1,4 +1,4 @@ -import {ThemeColorSchemeKey} from '@sanity/ui' +import type {ColorScheme} from '@sanity/ui/theme' import {memo, useMemo} from 'react' import {WorkshopConfig, WorkshopPlugin} from './config' @@ -19,7 +19,7 @@ export interface WorkshopProviderProps { origin: 'frame' | 'main' path: string payload: Record - scheme: ThemeColorSchemeKey + scheme: ColorScheme viewport?: string zoom?: number } @@ -92,5 +92,3 @@ export const WorkshopProvider = memo(function WorkshopProvider( ) }) - -WorkshopProvider.displayName = 'Memo(WorkshopProvider)' diff --git a/src/core/config/types.ts b/src/core/config/types.ts index 12048cd6..c47e1766 100644 --- a/src/core/config/types.ts +++ b/src/core/config/types.ts @@ -1,5 +1,4 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import {RootTheme} from '@sanity/ui' import {ElementType, ReactNode} from 'react' /** @public */ @@ -32,7 +31,6 @@ export interface WorkshopConfig { frameUrl?: string plugins?: WorkshopPlugin[] scopes: WorkshopScope[] - theme?: RootTheme title?: string } diff --git a/src/core/frame/WorkshopCanvas.tsx b/src/core/frame/WorkshopCanvas.tsx index 383aa6d6..a9cf367c 100644 --- a/src/core/frame/WorkshopCanvas.tsx +++ b/src/core/frame/WorkshopCanvas.tsx @@ -1,5 +1,5 @@ import {Box, Button, Card, Code, ErrorBoundary, Flex, Heading, Spinner, Stack} from '@sanity/ui' -import {createElement, memo, Suspense, useCallback, useState} from 'react' +import {memo, Suspense, useCallback, useState} from 'react' import {WorkshopStory} from '../config' import {useWorkshop} from '../useWorkshop' @@ -35,14 +35,17 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(): React.ReactNode { ) } + const Story = story.component return ( <>

{story.title}

}> - - {createElement(story.component)} + + + + @@ -74,7 +77,7 @@ const ErrorScreen = memo(function ErrorScreen(props: { return ( - + {error.message} diff --git a/src/core/frame/WorkshopFrame.tsx b/src/core/frame/WorkshopFrame.tsx index 56fe4293..a118b4fb 100644 --- a/src/core/frame/WorkshopFrame.tsx +++ b/src/core/frame/WorkshopFrame.tsx @@ -1,10 +1,4 @@ -import { - BoundaryElementProvider, - Card, - PortalProvider, - ThemeColorSchemeKey, - ToastProvider, -} from '@sanity/ui' +import type {ColorScheme} from '@sanity/ui/theme' import {memo, useCallback, useEffect, useMemo, useState} from 'react' import {WorkshopConfig} from '../config' @@ -19,7 +13,7 @@ import {createMainController} from './WorkshopMainController' /** @internal */ export interface WorkshopFrameProps { config: WorkshopConfig - setScheme: (nextScheme: ThemeColorSchemeKey) => void + setScheme: (nextScheme: ColorScheme) => void } function getStateFromLocation(): WorkshopState { @@ -30,7 +24,7 @@ function getStateFromLocation(): WorkshopState { frameReady: false, path, payload, - scheme: typeof scheme === 'string' ? (scheme as ThemeColorSchemeKey) : 'light', + scheme: typeof scheme === 'string' ? (scheme as ColorScheme) : 'light', viewport: typeof viewport === 'string' ? viewport : 'auto', zoom: typeof zoom === 'string' ? Number(zoom) : 1, } @@ -43,8 +37,6 @@ export const WorkshopFrame = memo(function WorkshopFrame( const {config, setScheme} = props const main = useMemo(() => createMainController(), []) const channel = useMemo(() => createPubsub(), []) - const [boundaryElement, setBoundaryElement] = useState(null) - const [portalElement, setPortalElement] = useState(null) // Publish messages to both frame+main const broadcast = useCallback( @@ -75,28 +67,19 @@ export const WorkshopFrame = memo(function WorkshopFrame( useEffect(() => broadcast({type: 'workshop/frameReady'}), [broadcast]) return ( - - - - - - -
- - - - - + + + ) }) diff --git a/src/core/helpers.ts b/src/core/helpers.ts index 82b07b01..2f6a823c 100644 --- a/src/core/helpers.ts +++ b/src/core/helpers.ts @@ -1,4 +1,4 @@ -import {ThemeColorSchemeKey} from '@sanity/ui' +import type {ColorScheme} from '@sanity/ui/theme' import {WorkshopScope, WorkshopStory} from './config' @@ -36,7 +36,7 @@ export function buildFrameUrl(params: { baseUrl?: string path: string payload: Record - scheme: ThemeColorSchemeKey + scheme: ColorScheme viewport: string zoom: number }): string { diff --git a/src/core/inspector/InspectorHeader.tsx b/src/core/inspector/InspectorHeader.tsx index da297716..a178a2cf 100644 --- a/src/core/inspector/InspectorHeader.tsx +++ b/src/core/inspector/InspectorHeader.tsx @@ -1,7 +1,7 @@ import {Card, Layer, Tab, TabList} from '@sanity/ui' import {memo, useCallback} from 'react' -import {inspectorHeader, inspectorHeaderCard} from '#styles' +import {inspectorHeader} from '#styles' import {InspectorTab} from './types' @@ -13,9 +13,9 @@ export const InspectorHeader = memo(function InspectorHeader(props: { const {currentTabId, onTabChange, tabs} = props return ( - - - + + + {tabs.map((tab) => ( {showTabs && } diff --git a/src/core/inspector/types.ts b/src/core/inspector/types.ts index ef045ddc..aae7b9dc 100644 --- a/src/core/inspector/types.ts +++ b/src/core/inspector/types.ts @@ -1,11 +1,10 @@ -import {ButtonTone} from '@sanity/ui' -import {ReactNode} from 'react' +import type {ElementTone} from '@sanity/ui/theme' import {WorkshopPlugin} from '../config' export interface InspectorTab { id: string - label: ReactNode + label: React.ReactNode plugin: WorkshopPlugin - tone?: ButtonTone + tone?: ElementTone } diff --git a/src/core/mount.tsx b/src/core/mount.tsx index 2b9698b5..292c0ad8 100644 --- a/src/core/mount.tsx +++ b/src/core/mount.tsx @@ -1,46 +1,50 @@ -import {studioTheme, ThemeColorSchemeKey, ThemeProvider, usePrefersDark} from '@sanity/ui' -import {startTransition, StrictMode, useEffect, useMemo, useState} from 'react' +import '@sanity/ui/css/index.css' + +import {Root, usePrefersDark} from '@sanity/ui' +import type {ColorScheme} from '@sanity/ui/theme' +import {startTransition, StrictMode, useEffect, useState} from 'react' import {createRoot} from 'react-dom/client' import {WorkshopConfig} from './config' -import {GlobalStyle} from './GlobalStyle' import {createLocationStore} from './location' import {Workshop} from './Workshop' /** @beta */ -export function mount(options: {config: WorkshopConfig; element: HTMLElement | null}): void { - const {config, element} = options - - if (!element) throw new Error('missing element') +export function mount(options: {config: WorkshopConfig}): void { + const {config} = options - const root = createRoot(element) + const root = createRoot(document) root.render( - + , ) } -function Root(props: {config: WorkshopConfig}) { +function App(props: {config: WorkshopConfig}) { const {config} = props + const [locationStore] = useState(() => createLocationStore()) const prefersDark = usePrefersDark() - const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light') - const locationStore = useMemo(() => createLocationStore(), []) + const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light') useEffect(() => { startTransition(() => setScheme(prefersDark ? 'dark' : 'light')) }, [prefersDark]) return ( - - + + + - + ) } diff --git a/src/core/mountFrame.tsx b/src/core/mountFrame.tsx index d5425e78..ca1238ea 100644 --- a/src/core/mountFrame.tsx +++ b/src/core/mountFrame.tsx @@ -1,35 +1,39 @@ -import {studioTheme, ThemeColorSchemeKey, ThemeProvider, usePrefersDark} from '@sanity/ui' +import '@sanity/ui/css/index.css' + +import {Root, usePrefersDark} from '@sanity/ui' +import type {ColorScheme} from '@sanity/ui/theme' import {StrictMode, useState} from 'react' import {createRoot} from 'react-dom/client' import {WorkshopConfig} from './config' import {WorkshopFrame} from './frame' -import {GlobalStyle} from './GlobalStyle' /** @beta */ -export function mountFrame(options: {config: WorkshopConfig; element: HTMLElement | null}): void { - const {config, element} = options - - if (!element) throw new Error('missing element') +export function mountFrame(options: {config: WorkshopConfig}): void { + const {config} = options - const root = createRoot(element) + const root = createRoot(document) root.render( - + , ) } -function Root(props: {config: WorkshopConfig}) { +function App(props: {config: WorkshopConfig}) { const {config} = props const prefersDark = usePrefersDark() - const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light') + const [scheme, setScheme] = useState(prefersDark ? 'dark' : 'light') return ( - - + + + - + ) } diff --git a/src/core/navbar/NavbarBreadcrumbs.tsx b/src/core/navbar/NavbarBreadcrumbs.tsx index cca50795..8dd10050 100644 --- a/src/core/navbar/NavbarBreadcrumbs.tsx +++ b/src/core/navbar/NavbarBreadcrumbs.tsx @@ -1,6 +1,8 @@ import {Breadcrumbs, Text} from '@sanity/ui' import {memo, useCallback} from 'react' +import {navbarBreadcrumbsLink} from '#styles' + import {useWorkshop} from '../useWorkshop' /** @internal */ @@ -40,10 +42,10 @@ const NavbarBreadcrumbsView = memo(function NavbarBreadcrumbsView(props: { / } - space={2} + gap={2} > - + {title} diff --git a/src/core/navbar/OpenCanvasButton.tsx b/src/core/navbar/OpenCanvasButton.tsx index 8d228d7c..9113dc0d 100644 --- a/src/core/navbar/OpenCanvasButton.tsx +++ b/src/core/navbar/OpenCanvasButton.tsx @@ -17,18 +17,32 @@ export const OpenCanvasButton = memo(function OpenCanvasButton() { [frameUrl, path, payload, scheme, zoom, viewport], ) - return ( + const fontSize = 1 + const iconRight = LaunchIcon + const mode = 'ghost' + const padding = 2 + const text = 'Open story' + return canvasUrl ? (