Skip to content

Commit 8efec84

Browse files
stipsanstipsan
committed
fix: test ui without styled-components
1 parent b37bf00 commit 8efec84

31 files changed

+319
-308
lines changed

‎README.md‎

Lines changed: 1 addition & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ An environment for designing, reviewing, and quality-testing React components.
77
npm install @sanity/ui-workshop -D
88

99
# Install peer dependencies
10-
npm install @sanity/ui react react-dom
10+
npm install @sanity/icons @sanity/ui react react-dom
1111
```
1212

1313
[![npm version](https://img.shields.io/npm/v/@sanity/ui-workshop.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui-workshop)
@@ -88,85 +88,6 @@ function TestStory() {
8888
}
8989
```
9090

91-
## Styling
92-
93-
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.
94-
95-
First install the `@vanilla-extract/css` package:
96-
97-
```sh
98-
npm install @vanilla-extract/css
99-
```
100-
101-
Then, add a `style.css.ts` file for your workshop:
102-
103-
```ts
104-
// src/__workshop__/style.css.ts
105-
106-
import {style} from '@vanilla-extract/css'
107-
108-
export const container = style({
109-
display: 'grid',
110-
alignItems: 'center',
111-
justifyContent: 'center',
112-
height: '100%',
113-
width: '100%',
114-
})
115-
```
116-
117-
And finally, import the `container` className and use it in your workshop:
118-
119-
```diff
120-
import {
121-
defineScope,
122-
useBoolean,
123-
useNumber,
124-
useSelect,
125-
useString,
126-
useText,
127-
} from '@sanity/ui-workshop'
128-
+import {container} from './style.css'
129-
130-
export default defineScope({
131-
name: 'test',
132-
title: 'Test',
133-
stories: [
134-
{
135-
name: 'test',
136-
title: 'Test',
137-
component: TestStory,
138-
},
139-
],
140-
})
141-
142-
const options = {
143-
None: '',
144-
Small: 'sm',
145-
Medium: 'md',
146-
Large: 'lg',
147-
}
148-
149-
function TestStory() {
150-
const text = useText('Text', 'Hello, world')
151-
const boolean = useBoolean('Boolean', true)
152-
const number = useNumber('Number', 1234)
153-
const string = useString('String', '...')
154-
const option = useSelect('Select option', options)
155-
156-
return (
157-
- <div>
158-
+ <div className={container}>
159-
<h1>This is my first story.</h1>
160-
<p>Some text: {text}</p>
161-
<p>A boolean: {boolean ? 'true' : 'false'}</p>
162-
<p>A number: {number}</p>
163-
<p>A string: {string}</p>
164-
<p>An option: {option}</p>
165-
</div>
166-
)
167-
}
168-
```
169-
17091
## License
17192

17293
[MIT](LICENSE)

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@
135135
"@sanity/pkg-utils": "^7.11.1",
136136
"@sanity/prettier-config": "^1.0.6",
137137
"@sanity/semantic-release-preset": "^4.1.8",
138-
"@sanity/ui": "^3.0.5",
138+
"@sanity/ui": "4.0.0-static.16",
139139
"@types/cpx": "^1.5.5",
140140
"@types/express": "^5.0.3",
141141
"@types/lodash": "^4.17.20",
@@ -170,7 +170,7 @@
170170
"vitest": "^3.2.4"
171171
},
172172
"peerDependencies": {
173-
"@sanity/ui": "^3",
173+
"@sanity/ui": "^4.0.0-0",
174174
"react": "^19",
175175
"react-dom": "^19"
176176
},

‎pnpm-lock.yaml‎

Lines changed: 9 additions & 20 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__workshop__/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ function TestStory() {
3636

3737
return (
3838
<Flex align="center" height="fill" justify="center">
39-
<Stack space={[3, 4, 5, 6]}>
40-
<Heading size={[2, 3, 4, 5]}>This is my first story.</Heading>
41-
<Text size={[2, 3, 4, 5]}>Some text: {text}</Text>
42-
<Text size={[2, 3, 4, 5]}>A boolean: {boolean ? 'true' : 'false'}</Text>
43-
<Text size={[2, 3, 4, 5]}>A number: {number}</Text>
44-
<Text size={[2, 3, 4, 5]}>A string: {string}</Text>
45-
<Text size={[2, 3, 4, 5]}>An option: {option}</Text>
39+
<Stack gap={[3, 4, 5]}>
40+
<Heading size={[2, 3, 4]}>This is my first story.</Heading>
41+
<Text size={[2, 3, 4]}>Some text: {text}</Text>
42+
<Text size={[2, 3, 4]}>A boolean: {boolean ? 'true' : 'false'}</Text>
43+
<Text size={[2, 3, 4]}>A number: {number}</Text>
44+
<Text size={[2, 3, 4]}>A string: {string}</Text>
45+
<Text size={[2, 3, 4]}>An option: {option}</Text>
4646
</Stack>
4747
</Flex>
4848
)

‎src/core/GlobalStyle.ts‎

Lines changed: 87 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,90 @@
1-
import {useRootTheme} from '@sanity/ui'
2-
import {setElementVars} from '@vanilla-extract/dynamic'
3-
import {useInsertionEffect} from 'react'
1+
import {createGlobalStyle} from 'styled-components'
42

5-
import {bodyBackgroundColor} from '#styles'
3+
export const GlobalStyle = createGlobalStyle`
4+
@font-face {
5+
font-family: Inter;
6+
font-style: normal;
7+
font-weight: 400;
8+
font-display: swap;
9+
src: url("https://studio-static.sanity.io/Inter-Regular.woff2") format("woff2");
10+
}
11+
@font-face {
12+
font-family: Inter;
13+
font-style: italic;
14+
font-weight: 400;
15+
font-display: swap;
16+
src: url("https://studio-static.sanity.io/Inter-Italic.woff2") format("woff2");
17+
}
18+
@font-face {
19+
font-family: Inter;
20+
font-style: normal;
21+
font-weight: 500;
22+
font-display: swap;
23+
src: url("https://studio-static.sanity.io/Inter-Medium.woff2") format("woff2");
24+
}
25+
@font-face {
26+
font-family: Inter;
27+
font-style: italic;
28+
font-weight: 500;
29+
font-display: swap;
30+
src: url("https://studio-static.sanity.io/Inter-MediumItalic.woff2") format("woff2");
31+
}
32+
@font-face {
33+
font-family: Inter;
34+
font-style: normal;
35+
font-weight: 600;
36+
font-display: swap;
37+
src: url("https://studio-static.sanity.io/Inter-SemiBold.woff2") format("woff2");
38+
}
39+
@font-face {
40+
font-family: Inter;
41+
font-style: italic;
42+
font-weight: 600;
43+
font-display: swap;
44+
src: url("https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2") format("woff2");
45+
}
46+
@font-face {
47+
font-family: Inter;
48+
font-style: normal;
49+
font-weight: 700;
50+
font-display: swap;
51+
src: url("https://studio-static.sanity.io/Inter-Bold.woff2") format("woff2");
52+
}
53+
@font-face {
54+
font-family: Inter;
55+
font-style: italic;
56+
font-weight: 700;
57+
font-display: swap;
58+
src: url("https://studio-static.sanity.io/Inter-BoldItalic.woff2") format("woff2");
59+
}
60+
@font-face {
61+
font-family: Inter;
62+
font-style: normal;
63+
font-weight: 800;
64+
font-display: swap;
65+
src: url("https://studio-static.sanity.io/Inter-ExtraBold.woff2") format("woff2");
66+
}
67+
@font-face {
68+
font-family: Inter;
69+
font-style: italic;
70+
font-weight: 800;
71+
font-display: swap;
72+
src: url("https://studio-static.sanity.io/Inter-ExtraBoldItalic.woff2") format("woff2");
73+
}
74+
@font-face {
75+
font-family: Inter;
76+
font-style: normal;
77+
font-weight: 900;
78+
font-display: swap;
79+
src: url("https://studio-static.sanity.io/Inter-Black.woff2") format("woff2");
80+
}
81+
@font-face {
82+
font-family: Inter;
83+
font-style: italic;
84+
font-weight: 900;
85+
font-display: swap;
86+
src: url("https://studio-static.sanity.io/Inter-BlackItalic.woff2") format("woff2");
87+
}
688
7-
export function GlobalStyle(): null {
8-
const {scheme, theme} = useRootTheme()
9-
const bg = theme.v2!.color[scheme].default.bg!
1089
11-
useInsertionEffect(() => {
12-
setElementVars(document.body, {
13-
[bodyBackgroundColor]: bg,
14-
})
15-
}, [bg])
16-
17-
return null
18-
}
90+
`

0 commit comments

Comments
 (0)