fix: test ui without styled-components

Author: stipsan

README.md

@@ -7,7 +7,7 @@ An environment for designing, reviewing, and quality-testing React components.
 npm install @sanity/ui-workshop -D
 
 # Install peer dependencies
-npm install @sanity/icons @sanity/ui react react-dom styled-components
+npm install @sanity/icons @sanity/ui react react-dom
 ```
 
 [![npm version](https://img.shields.io/npm/v/@sanity/ui-workshop.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui-workshop)

package.json

@@ -72,7 +72,7 @@
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
     "prepare": "husky install",
-    "prepublishOnly": "pnpm run build",
+    "prepack": "pnpm run build",
     "release": "semantic-release",
     "test": "vitest",
     "watch": "pkg watch --strict",
@@ -128,7 +128,7 @@
     "@sanity/pkg-utils": "^7.11.0",
     "@sanity/prettier-config": "^1.0.6",
     "@sanity/semantic-release-preset": "^4.1.8",
-    "@sanity/ui": "^3.0.5",
+    "@sanity/ui": "4.0.0-static.16",
     "@types/cpx": "^1.5.5",
     "@types/express": "^5.0.3",
     "@types/lodash": "^4.17.20",
@@ -165,7 +165,7 @@
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "@sanity/ui": "^3",
+    "@sanity/ui": "^4.0.0-0",
     "react": "^19",
     "react-dom": "^19",
     "styled-components": "^6.1"

pnpm-lock.yaml

@@ -36,13 +36,13 @@ function TestStory() {
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Stack space={[3, 4, 5, 6]}>
-        <Heading size={[2, 3, 4, 5]}>This is my first story.</Heading>
-        <Text size={[2, 3, 4, 5]}>Some text: {text}</Text>
-        <Text size={[2, 3, 4, 5]}>A boolean: {boolean ? 'true' : 'false'}</Text>
-        <Text size={[2, 3, 4, 5]}>A number: {number}</Text>
-        <Text size={[2, 3, 4, 5]}>A string: {string}</Text>
-        <Text size={[2, 3, 4, 5]}>An option: {option}</Text>
+      <Stack gap={[3, 4, 5]}>
+        <Heading size={[2, 3, 4]}>This is my first story.</Heading>
+        <Text size={[2, 3, 4]}>Some text: {text}</Text>
+        <Text size={[2, 3, 4]}>A boolean: {boolean ? 'true' : 'false'}</Text>
+        <Text size={[2, 3, 4]}>A number: {number}</Text>
+        <Text size={[2, 3, 4]}>A string: {string}</Text>
+        <Text size={[2, 3, 4]}>An option: {option}</Text>
       </Stack>
     </Flex>
   )

src/__workshop__/index.tsx

@@ -86,7 +86,5 @@ export const GlobalStyle = createGlobalStyle`
     src: url("https://studio-static.sanity.io/Inter-BlackItalic.woff2") format("woff2");
   }
 
-  body {
-    background-color: ${({theme}) => theme.sanity.color.base.bg};
-  }
+
 `

src/core/GlobalStyle.ts

@@ -1,11 +1,5 @@
-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, useCallback, useEffect, useMemo, useRef, useState} from 'react'
@@ -27,13 +21,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<WorkshopLocation, 'type'>,
-  schemeProp?: ThemeColorSchemeKey,
+  schemeProp?: ColorScheme,
   frameReady?: boolean,
 ): WorkshopState {
   const path = loc.path
@@ -44,7 +38,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 +80,6 @@ export const Workshop = memo(function Workshop(props: WorkshopProps): React.Reac
   const withNavbar = config.features?.navbar ?? true
   const channel = useMemo(() => createPubsub<WorkshopMsg>(), [])
   const frame = useMemo(() => createWorkshopFrameController(), [])
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [{frameReady, path, payload, scheme, viewport, zoom}, setState] = useState<WorkshopState>(
     () => getStateFromLocation(locationStore.get(), schemeProp),
   )
@@ -243,39 +235,25 @@ export const Workshop = memo(function Workshop(props: WorkshopProps): React.Reac
       viewport={viewport}
       zoom={zoom}
     >
-      <ToastProvider>
-        <BoundaryElementProvider element={boundaryElement}>
-          <PortalProvider element={portalElement}>
-            <Flex
-              data-boundary=""
-              direction="column"
-              height="fill"
-              ref={setBoundaryElement}
-              style={{minWidth: 320}}
-            >
-              {withNavbar && (
-                <WorkshopNavbar
-                  inspectorExpanded={inspectorExpanded}
-                  navigatorExpanded={navigatorExpanded}
-                  onInspectorToggle={handleInspectorToggle}
-                  onNavigatorToggle={handleNavigatorToggle}
-                />
-              )}
-
-              <Flex flex={1}>
-                <WorkshopNavigator collections={config.collections} expanded={navigatorExpanded} />
-                <WorkshopCanvas
-                  frameRef={frame.setElement}
-                  hidden={navigatorExpanded || inspectorExpanded}
-                />
-                <WorkshopInspector expanded={inspectorExpanded} />
-              </Flex>
-
-              <div data-portal="" ref={setPortalElement} />
-            </Flex>
-          </PortalProvider>
-        </BoundaryElementProvider>
-      </ToastProvider>
+      <Flex data-boundary="" direction="column" height="fill" style={{minWidth: 320}}>
+        {withNavbar && (
+          <WorkshopNavbar
+            inspectorExpanded={inspectorExpanded}
+            navigatorExpanded={navigatorExpanded}
+            onInspectorToggle={handleInspectorToggle}
+            onNavigatorToggle={handleNavigatorToggle}
+          />
+        )}
+
+        <Flex flex={1}>
+          <WorkshopNavigator collections={config.collections} expanded={navigatorExpanded} />
+          <WorkshopCanvas
+            frameRef={frame.setElement}
+            hidden={navigatorExpanded || inspectorExpanded}
+          />
+          <WorkshopInspector expanded={inspectorExpanded} />
+        </Flex>
+      </Flex>
     </WorkshopProvider>
   )
 })

src/core/Workshop.tsx

@@ -1,4 +1,5 @@
-import {BoxDisplay, Card, Container, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+import {Card, Container, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
+import type {Display} from '@sanity/ui/css'
 import {memo, useMemo, useState} from 'react'
 import {styled} from 'styled-components'
 
@@ -37,7 +38,7 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
     [viewportW, viewportH, zoom],
   )
 
-  const display: BoxDisplay = useMemo(() => (hidden ? 'none' : 'block'), [hidden])
+  const display = useMemo<Display>(() => (hidden ? 'none' : 'block'), [hidden])
 
   const frameStyle = useMemo(
     () => ({
@@ -54,7 +55,7 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
       <Flex align="center" height="fill" justify="center" sizing="border">
         {path === '/' && (
           <Container width={0}>
-            <Stack padding={4} space={4}>
+            <Stack padding={4} gap={4}>
               <Heading align="center">{title}</Heading>
               <Text align="center" muted>
                 Browse workshop stories in the navigator to the left.

src/core/WorkshopCanvas.tsx

@@ -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<CustomMsg = never> {
   origin: 'frame' | 'main'
   path: string
   payload: Record<string, unknown>
-  scheme: ThemeColorSchemeKey
+  scheme: ColorScheme
   scope: WorkshopScope | null
   scopes: WorkshopScope[]
   story: WorkshopStory | null

src/core/WorkshopContext.ts

@@ -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<string, unknown>
-  scheme: ThemeColorSchemeKey
+  scheme: ColorScheme
   viewport?: string
   zoom?: number
 }

src/core/WorkshopProvider.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {RootTheme} from '@sanity/ui'
+
 import {ElementType, ReactNode} from 'react'
 
 /** @public */
@@ -32,7 +32,6 @@ export interface WorkshopConfig {
   frameUrl?: string
   plugins?: WorkshopPlugin<any>[]
   scopes: WorkshopScope[]
-  theme?: RootTheme
   title?: string
 }