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)

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>
   )
 })

src/core/inspector/WorkshopInspector.tsx

@@ -3,7 +3,8 @@ import {Box, Card, Flex, Layer, TextInput} from '@sanity/ui'
 import type {Display, ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
 import {memo, useCallback, useMemo, useState} from 'react'
-import {styled} from 'styled-components'
+
+import {workshopNavigator} from '#styles'
 
 import {WorkshopScope, WorkshopStory} from '../config'
 import {EMPTY_ARRAY} from '../constants'
@@ -13,14 +14,6 @@ import {SearchResults} from './SearchResults'
 import {StoryTree} from './StoryTree'
 import {MenuCollection, MenuList, MenuScope} from './types'
 
-const Root = styled(Card)`
-  @media screen and (min-width: 600px) {
-    border-right: 1px solid var(--card-border-color);
-    min-width: 180px;
-    max-width: 300px;
-  }
-`
-
 const flexNoneStyle: React.CSSProperties = {flex: 'none'}
 const lineHeightNoneStyle: React.CSSProperties = {lineHeight: 0}
 const textInputFontSize: ResponsiveProp<FontTextSize> = [2, 2, 1]
@@ -107,7 +100,12 @@ const NavigatorView = memo(function NavigatorView(props: {
   )
 
   return (
-    <Root display={display} flex={1} overflow={['hidden', 'hidden', 'auto']}>
+    <Card
+      className={workshopNavigator}
+      display={display}
+      flex={1}
+      overflow={['hidden', 'hidden', 'auto']}
+    >
       <Flex direction="column" height="fill">
         <Layer style={flexNoneStyle}>
           <Card padding={2} shadow={1} style={lineHeightNoneStyle}>
@@ -141,6 +139,6 @@ const NavigatorView = memo(function NavigatorView(props: {
           )}
         </Card>
       </Flex>
-    </Root>
+    </Card>
   )
 })