Skip to content

Commit e1c7ea0

Browse files
author
Herman Wikner
authoredJul 9, 2021
refactor(studio-hints): migrate to @sanity/ui (#2604)
* chore(studio-hints): add `@sanity/ui` and `@sanity/icons` as dependencies * refactor(studio-hints): migrate `StudioHints` to `@sanity/ui` * refactor(studio-hints): migrate `HintCard` to `@sanity/ui` * refactor(studio-hints): migrate `HintsPackage` to `@sanity/ui` * refactor(studio-hints): migrate `LinksList` to `@sanity/ui` * refactor(studio-hints): migrate `ToggleSidecarButton` to `@sanity/ui`
·
v3.81.0v2.12.3-rc.0
1 parent b762503 commit e1c7ea0

10 files changed

+173
-303
lines changed
 

‎packages/@sanity/studio-hints/package.json

+5
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
"hints",
2222
"sanity-plugin"
2323
],
24+
"dependencies": {
25+
"@sanity/ui": "^0.34.2",
26+
"@sanity/icons": "^1.1.2"
27+
28+
},
2429
"devDependencies": {
2530
"rimraf": "^2.7.1"
2631
},

‎packages/@sanity/studio-hints/src/StudioHints.css

-13
This file was deleted.

‎packages/@sanity/studio-hints/src/StudioHints.js

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
/* eslint-disable react/no-multi-comp */
22
import React from 'react'
33
import studioHintsConfig from 'part:@sanity/default-layout/studio-hints-config?'
4+
import styled from 'styled-components'
5+
import {Card, ThemeProvider, studioTheme} from '@sanity/ui'
46
import ToggleSidecarButton from './components/ToggleSidecarButton'
57
import HintsPackage from './components/HintsPackage'
6-
import styles from './StudioHints.css'
8+
9+
const Root = styled(Card)`
10+
height: 100%;
11+
width: 100%;
12+
min-width: 420px;
13+
`
714

815
const isMobile = () => {
916
return typeof window !== 'undefined' && window.innerWidth < 512
@@ -13,9 +20,11 @@ export const isSidecarEnabled = () => studioHintsConfig && !isMobile()
1320

1421
export const SidecarLayout = () => {
1522
return (
16-
<div className={styles.root}>
17-
<HintsPackage />
18-
</div>
23+
<ThemeProvider theme={studioTheme} scheme="dark">
24+
<Root display="flex" overflow="auto" sizing="border" tone="transparent" borderTop borderLeft>
25+
<HintsPackage />
26+
</Root>
27+
</ThemeProvider>
1928
)
2029
}
2130

‎packages/@sanity/studio-hints/src/components/HintCard.css

-37
This file was deleted.

‎packages/@sanity/studio-hints/src/components/HintCard.js

+27-33
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,37 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import LaunchIcon from 'part:@sanity/base/launch-icon'
4-
import styles from './HintCard.css'
3+
import {Card, Text, Heading, Stack, Flex} from '@sanity/ui'
4+
import {LaunchIcon} from '@sanity/icons'
55
import {resolveUrl} from './utils'
66

77
function HintCard(props) {
88
const {card, repoId} = props
9-
/**
10-
* Hint cards currently only link to external sources.
11-
* In future iterations a hint card may have it's own page
12-
* that opens by clicking the card (onCardClick prop), that
13-
* then renders a page component.
14-
*/
15-
/*
16-
<div className={styles.root} onClick={() => onCardClick(card._id)}>
17-
<h4 className={styles.cardTitle}>
18-
{card.title} <ArrowRight />
19-
</h4>
20-
<p className={styles.cardSummary}>{card.summary}</p>
21-
</div>
22-
*/
23-
return (
24-
<li>
25-
<a
26-
href={resolveUrl(card.hint, repoId)}
27-
className={styles.root}
28-
target="_blank"
29-
rel="noopener noreferrer"
30-
>
31-
<div>
32-
<span className={styles.cardTitle}>{card.titleOverride || card.hint.title}</span>
33-
<p className={styles.cardSummary}>{card.hint.description}</p>
34-
</div>
359

36-
<span className={styles.externalIcon}>
37-
<LaunchIcon />
38-
</span>
39-
</a>
40-
</li>
10+
return (
11+
<Card
12+
tone="inherit"
13+
border
14+
radius={2}
15+
padding={4}
16+
as="a"
17+
href={resolveUrl(card.hint, repoId)}
18+
target="_blank"
19+
rel="noopener noreferrer"
20+
>
21+
<Stack space={3}>
22+
<Flex justify="space-between">
23+
<Heading size={1} muted as="h4">
24+
{card.titleOverride || card.hint.title}
25+
</Heading>
26+
<Text muted>
27+
<LaunchIcon />
28+
</Text>
29+
</Flex>
30+
<Text size={1} muted>
31+
{card.hint.description}
32+
</Text>
33+
</Stack>
34+
</Card>
4135
)
4236
}
4337

‎packages/@sanity/studio-hints/src/components/HintsPackage.css

-70
This file was deleted.

‎packages/@sanity/studio-hints/src/components/HintsPackage.js

+56-41
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
/* eslint-disable no-console, class-methods-use-this */
22
import React from 'react'
3-
import LinkButton from 'part:@sanity/components/buttons/anchor'
4-
import Spinner from 'part:@sanity/components/loading/spinner'
53
import studioHintsConfig from 'part:@sanity/default-layout/studio-hints-config'
6-
import WarningIcon from 'part:@sanity/base/warning-icon'
4+
import {Card, Text, Heading, Stack, Flex, Inline, Spinner, Button, Box} from '@sanity/ui'
5+
import {WarningOutlineIcon, InfoOutlineIcon} from '@sanity/icons'
76
import {getHints} from '../datastore'
87
import {resolveUrl} from './utils'
98
import LinksList from './LinksList'
10-
import styles from './HintsPackage.css'
119

1210
const removeHintsArticleSlug = 'remove-this-sidebar'
1311

@@ -83,15 +81,19 @@ export default class HintsPackage extends React.PureComponent {
8381

8482
renderError(title, message) {
8583
return (
86-
<div className={`${styles.root} ${styles.withError}`}>
87-
<div className={styles.errorWrapper}>
88-
<h2 className={styles.errorTitle}>
89-
<WarningIcon />
90-
{title}
91-
</h2>
92-
<p className={styles.errorMessage}>{message}</p>
93-
</div>
94-
</div>
84+
<Stack space={4} paddingX={4} paddingY={5}>
85+
<Flex justify="center" align="center">
86+
<Inline space={2}>
87+
<Heading size={1}>
88+
<WarningOutlineIcon />
89+
</Heading>
90+
<Heading size={1}>{title}</Heading>
91+
</Inline>
92+
</Flex>
93+
<Text size={1} align="center">
94+
{message}
95+
</Text>
96+
</Stack>
9597
)
9698
}
9799

@@ -110,9 +112,16 @@ export default class HintsPackage extends React.PureComponent {
110112

111113
if (isLoading) {
112114
return (
113-
<div className={styles.root}>
114-
<Spinner message="Loading hints" />
115-
</div>
115+
<Flex justify="center" align="center" paddingX={4} paddingY={5} flex={1}>
116+
<Stack space={3}>
117+
<Text size={1} muted align="center">
118+
<Spinner />
119+
</Text>
120+
<Text size={1} muted>
121+
Loading hints
122+
</Text>
123+
</Stack>
124+
</Flex>
116125
)
117126
}
118127

@@ -126,34 +135,40 @@ export default class HintsPackage extends React.PureComponent {
126135

127136
const {links, hints, title, hintsTitle, linksTitle} = hintsPackage
128137
return (
129-
<div className={styles.root}>
130-
<div className={styles.header}>
131-
<h2 className={styles.trayTitle}>{title}</h2>
132-
</div>
133-
134-
<div className={styles.content}>
135-
<div>
136-
<LinksList title={linksTitle} links={links} repoId={repoId} />
137-
</div>
138-
<div>
139-
<LinksList type="card" title={hintsTitle} links={hints} repoId={repoId} />
140-
</div>
141-
</div>
142-
143-
<div className={styles.footer}>
144-
{sidebarRemovalInstructions && (
145-
<LinkButton
146-
color="primary"
138+
<Flex direction="column">
139+
<Card padding={4} borderBottom tone="inherit" sizing="border">
140+
<Heading size={1} as="h2">
141+
{title}
142+
</Heading>
143+
</Card>
144+
145+
<Box overflow="auto" paddingX={4} paddingY={5} flex={1}>
146+
<Stack space={5}>
147+
<Box>
148+
<LinksList title={linksTitle} links={links} repoId={repoId} />
149+
</Box>
150+
<Box>
151+
<LinksList type="card" title={hintsTitle} links={hints} repoId={repoId} />
152+
</Box>
153+
</Stack>
154+
</Box>
155+
156+
{sidebarRemovalInstructions && (
157+
<Card borderTop padding={3} tone="inherit">
158+
<Button
159+
as="a"
160+
text="How to remove this?"
147161
href={resolveUrl(sidebarRemovalInstructions)}
148162
rel="noopener noreferrer"
149-
tone="navbar"
150163
target="_blank"
151-
>
152-
How to remove this?
153-
</LinkButton>
154-
)}
155-
</div>
156-
</div>
164+
tone="primary"
165+
style={{width: '100%'}}
166+
mode="bleed"
167+
icon={InfoOutlineIcon}
168+
/>
169+
</Card>
170+
)}
171+
</Flex>
157172
)
158173
}
159174
}

‎packages/@sanity/studio-hints/src/components/LinksList.css

-64
This file was deleted.

‎packages/@sanity/studio-hints/src/components/LinksList.js

+47-29
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
3-
import LaunchIcon from 'part:@sanity/base/launch-icon'
4-
import styles from './LinksList.css'
3+
import {Card, Text, Stack, Flex, Box, Label} from '@sanity/ui'
4+
import {LaunchIcon} from '@sanity/icons'
55
import HintCard from './HintCard'
66

77
function CardLinks(props) {
@@ -10,34 +10,52 @@ function CardLinks(props) {
1010
return null
1111
}
1212

13+
if (type === 'card') {
14+
return (
15+
<Stack space={4}>
16+
<Label muted>{title}</Label>
17+
<Stack space={2} as="ul">
18+
{links.map((link) => (
19+
<Box as="li" key={link._key}>
20+
<HintCard card={link} repoId={repoId} />
21+
</Box>
22+
))}
23+
</Stack>
24+
</Stack>
25+
)
26+
}
27+
1328
return (
14-
<div className={styles.root}>
15-
<h3 className={styles.listTitle}>{title}</h3>
16-
<ul
17-
className={`${styles.linksList} ${type === 'card' ? styles.cardList : styles.simpleList}`}
18-
>
19-
{links.map((link) => {
20-
return type === 'card' ? (
21-
<HintCard key={link._key} card={link} repoId={repoId} />
22-
) : (
23-
<li className={styles.linkTitle} key={link.title}>
24-
<a
25-
className={styles.link}
26-
href={`${link.url}?utm_source=hints&utm_medium=${repoId}`}
27-
target="_blank"
28-
rel="noopener noreferrer"
29-
>
30-
{/* TODO: handle inserting icon */}
31-
<span className={styles.linkTitleText}>{link.title}</span>
32-
<span className={styles.externalIcon}>
33-
<LaunchIcon />
34-
</span>
35-
</a>
36-
</li>
37-
)
38-
})}
39-
</ul>
40-
</div>
29+
<Stack space={4}>
30+
<Label muted as="h3">
31+
{title}
32+
</Label>
33+
<Card radius={2} border tone="inherit" overflow="hidden">
34+
<Stack as="ul">
35+
{links.map((link) => {
36+
return (
37+
<Box as="li" key={link._key}>
38+
<Card
39+
tone="inherit"
40+
padding={4}
41+
as="a"
42+
href={`${link.url}?utm_source=hints&utm_medium=${repoId}`}
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
>
46+
<Flex justify="space-between" align="center">
47+
<Text muted>{link.title}</Text>
48+
<Text muted>
49+
<LaunchIcon />
50+
</Text>
51+
</Flex>
52+
</Card>
53+
</Box>
54+
)
55+
})}
56+
</Stack>
57+
</Card>
58+
</Stack>
4159
)
4260
}
4361

‎packages/@sanity/studio-hints/src/components/ToggleSidecarButton.js

+25-12
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,19 @@ import {
55
isSidecarOpenSetting,
66
toggleSidecarOpenState,
77
} from 'part:@sanity/default-layout/sidecar-datastore'
8-
import Button from 'part:@sanity/components/buttons/default'
9-
import HelpCircleIcon from 'part:@sanity/base/help-circle-icon'
8+
import {Button as UIButton, studioTheme, ThemeProvider} from '@sanity/ui'
9+
import {HelpCircleIcon} from '@sanity/icons'
10+
import styled from 'styled-components'
11+
12+
const Button = styled(UIButton)`
13+
width: 33px;
14+
height: 33px;
15+
16+
&:not(:hover):not(:focus):not([data-selected]) {
17+
background: transparent;
18+
box-shadow: unset;
19+
}
20+
`
1021

1122
export default class ToggleSidecarButton extends React.PureComponent {
1223
state = {
@@ -29,16 +40,18 @@ export default class ToggleSidecarButton extends React.PureComponent {
2940
const {isOpen} = this.state
3041

3142
return (
32-
<Button
33-
aria-label="Toggle sidecar"
34-
aria-pressed={isOpen}
35-
icon={HelpCircleIcon}
36-
kind="simple"
37-
onClick={toggleSidecarOpenState}
38-
selected={isOpen}
39-
tone="navbar"
40-
padding="small"
41-
/>
43+
<ThemeProvider theme={studioTheme} scheme="dark">
44+
<Button
45+
padding={0}
46+
aria-label="Toggle sidecar"
47+
aria-pressed={isOpen}
48+
icon={HelpCircleIcon}
49+
onClick={toggleSidecarOpenState}
50+
selected={isOpen}
51+
tone="primary"
52+
mode="bleed"
53+
/>
54+
</ThemeProvider>
4255
)
4356
}
4457
}

2 commit comments

Comments
 (2)

vercel[bot] commented on Jul 9, 2021

@vercel[bot]
vercel[bot]
on Jul 9, 2021

Successfully deployed to the following URLs:

perf-studio – ./

perf-studio.sanity.build
perf-studio-git-next.sanity.build

vercel[bot] commented on Jul 9, 2021

@vercel[bot]
vercel[bot]
on Jul 9, 2021

Successfully deployed to the following URLs:

test-studio – ./

test-studio-git-next.sanity.build
test-studio.sanity.build

Please sign in to comment.