feat: remove 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
+npm install @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.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
     },
   },
   tsconfig: 'tsconfig.dist.json',
-  babel: {reactCompiler: true, styledComponents: true},
+  babel: {reactCompiler: true},
   reactCompilerOptions: {target: '19'},
   rollup: {
     output: {

package.json

@@ -144,7 +144,6 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
-    "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "commitlint": "^19.8.1",
     "eslint": "^8.57.1",
@@ -164,16 +163,14 @@
     "react-dom": "^19.1.1",
     "react-is": "^19.1.1",
     "semantic-release": "^23.1.1",
-    "styled-components": "^6.1.19",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.9.2",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@sanity/ui": "^4.0.0-0",
     "react": "^19",
-    "react-dom": "^19",
-    "styled-components": "^6.1"
+    "react-dom": "^19"
   },
   "packageManager": "pnpm@9.15.9",
   "publishConfig": {

pnpm-lock.yaml

@@ -1,20 +1,13 @@
 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'
+
+import {iframe} from '#styles'
 
 import {VIEWPORT_OPTIONS} from './constants'
 import {buildFrameUrl} from './helpers'
 import {useWorkshop} from './useWorkshop'
 
-const Frame = styled.iframe`
-  display: block;
-  border: 0;
-  height: 100%;
-  width: 100%;
-  view-transition-name: canvas;
-`
-
 /** @internal */
 export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
   frameRef: React.Ref<HTMLIFrameElement>
@@ -43,7 +36,6 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
   const frameStyle = useMemo(
     () => ({
       transform: `scale(${zoom})`,
-      transformOrigin: '0 0',
       width: `${100 / zoom}%`,
       height: `${100 / zoom}%`,
     }),
@@ -73,7 +65,7 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
           width="auto"
         >
           <Card height="fill" shadow={1}>
-            <Frame ref={frameRef} src={initialFrameUrl} style={frameStyle} />
+            <iframe className={iframe} ref={frameRef} src={initialFrameUrl} style={frameStyle} />
           </Card>
         </Container>
       </Flex>

src/core/WorkshopCanvas.tsx

@@ -2,21 +2,14 @@
 import {Box, Card, Flex, TabPanel} from '@sanity/ui'
 import type {Display, ResponsiveProp} from '@sanity/ui/css'
 import {ElementType, memo, useState} from 'react'
-import {styled} from 'styled-components'
+
+import {workshopInspector} from '#styles'
 
 import {EMPTY_RECORD} from '../constants'
 import {useWorkshop} from '../useWorkshop'
 import {InspectorHeader} from './InspectorHeader'
 import {InspectorTab} from './types'
 
-const Root = styled(Card)`
-  @media screen and (min-width: 600px) {
-    border-left: 1px solid var(--card-border-color);
-    min-width: 180px;
-    max-width: 300px;
-  }
-`
-
 const MemoRender = memo(function MemoRender(props: {component: ElementType; options: any}) {
   const {component: Component, options} = props
   return <Component options={options} />
@@ -47,7 +40,12 @@ export const WorkshopInspector = memo(function WorkshopInspector(props: {
   const display: ResponsiveProp<Display> = expanded ? ['block'] : ['none', 'none', 'block']
 
   return (
-    <Root display={display} flex={1} overflow={['hidden', 'hidden', 'auto']}>
+    <Card
+      className={workshopInspector}
+      display={display}
+      flex={1}
+      overflow={['hidden', 'hidden', 'auto']}
+    >
       <Flex direction="column" height="fill">
         {showTabs && <InspectorHeader currentTabId={tabId} onTabChange={setTabId} tabs={tabs} />}
 
@@ -79,6 +77,6 @@ export const WorkshopInspector = memo(function WorkshopInspector(props: {
           </Box>
         )}
       </Flex>
-    </Root>
+    </Card>
   )
 })