Skip to content

Commit 22535db

Browse files
colepeterscolepeters
authored
feat: update Explorer design for Sanity design language (#24)
* feat: update Explorer design for Sanity design language * feat: remove max width from site header * feat: initial update for Explorer design based on design team feedback
1 parent 414d632 commit 22535db

File tree

14 files changed

+3126
-148
lines changed

14 files changed

+3126
-148
lines changed

‎apps/sdk-explorer/src/App.tsx

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,73 @@
1+
import {hues} from '@sanity/color'
12
import {SanityMonogram} from '@sanity/logos'
2-
import {Card, Flex, Inline, Text} from '@sanity/ui'
3+
import {Box, Card, Container, Flex, Inline, Text} from '@sanity/ui'
34
import {type JSX} from 'react'
45
import {BrowserRouter, Link, Route, Routes} from 'react-router'
6+
import {createGlobalStyle} from 'styled-components'
57

68
import DocumentTable from './document-collections/DocumentTable/DocumentTable'
79
import PreviewGrid from './document-collections/PreviewGrid/PreviewGrid'
810
import PreviewList from './document-collections/PreviewList/PreviewList'
911
import MoviesByActor from './groq/MoviesByActor/MoviesByActor'
1012
import Home from './Home'
13+
import ScrollOnPathChange from './ScollOnPathChange'
14+
15+
const Body = createGlobalStyle`
16+
body {
17+
background-color: ${hues.gray['50'].hex};
18+
}
19+
`
1120

1221
export default function App(): JSX.Element {
1322
return (
1423
<BrowserRouter>
15-
<Card style={{position: 'relative'}}>
24+
<Body />
25+
<ScrollOnPathChange />
26+
<Card style={{position: 'relative'}} tone="transparent">
1627
<Card
1728
tone="transparent"
18-
shadow={3}
19-
marginTop={2}
20-
marginX={2}
29+
shadow={1}
2130
marginBottom={5}
22-
paddingX={4}
23-
radius={3}
2431
style={{
2532
position: 'sticky',
26-
top: 8,
33+
top: 0,
2734
zIndex: 3,
28-
backgroundColor: 'hsl(0deg 0% 100% / 0.5',
29-
backdropFilter: 'blur(15px) brightness(110%)',
35+
backgroundColor: 'white',
3036
}}
3137
>
32-
<Flex align="center" justify="space-between" style={{height: 48}}>
33-
<Text as="h1" size={2} weight="medium">
34-
<Link to="/" style={{color: 'inherit'}}>
35-
<Flex align="center" gap={3}>
36-
<SanityMonogram />
37-
SDK Explorer
38-
</Flex>
39-
</Link>
40-
</Text>
41-
<Inline space={4}>
42-
<Link to="/">
38+
<Box paddingX={4}>
39+
<Flex align="center" justify="space-between" style={{height: 52}}>
40+
<Text as="h1" size={2} weight="medium">
41+
<Link to="/" style={{color: 'inherit'}}>
42+
<Flex align="center" gap={3}>
43+
<SanityMonogram style={{margin: 0}} />
44+
SDK Explorer
45+
</Flex>
46+
</Link>
47+
</Text>
48+
<Inline space={4}>
49+
<Text weight="medium" size={1}>
50+
<a href="/">Home</a>
51+
</Text>
52+
<Text weight="medium" size={1}>
53+
<a href="https://sdk-docs.sanity.dev">SDK Docs</a>
54+
</Text>
4355
<Text weight="medium" size={1}>
44-
Home
56+
<a href="https://github.com/sanity-io/sdk">GitHub</a>
4557
</Text>
46-
</Link>
47-
</Inline>
48-
</Flex>
58+
</Inline>
59+
</Flex>
60+
</Box>
4961
</Card>
50-
<Routes>
51-
<Route path="/" element={<Home />} />
52-
<Route path="/document-collections/preview-list" element={<PreviewList />} />
53-
<Route path="/document-collections/preview-grid" element={<PreviewGrid />} />
54-
<Route path="/document-collections/document-table" element={<DocumentTable />} />
55-
<Route path="/groq/movies-by-actor" element={<MoviesByActor />} />
56-
</Routes>
62+
<Container width={2} padding={4}>
63+
<Routes>
64+
<Route path="/" element={<Home />} />
65+
<Route path="/document-collections/preview-list" element={<PreviewList />} />
66+
<Route path="/document-collections/preview-grid" element={<PreviewGrid />} />
67+
<Route path="/document-collections/document-table" element={<DocumentTable />} />
68+
<Route path="/groq/movies-by-actor" element={<MoviesByActor />} />
69+
</Routes>
70+
</Container>
5771
</Card>
5872
</BrowserRouter>
5973
)

‎apps/sdk-explorer/src/ExampleCard.tsx

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {hues} from '@sanity/color'
2-
import {Card, Stack, Text} from '@sanity/ui'
2+
import {Card, Inline, Stack, Text} from '@sanity/ui'
33
import {type JSX} from 'react'
44
import {Link} from 'react-router'
55

@@ -8,6 +8,7 @@ import ExampleAttributes from './ExampleAttributes'
88
interface ExampleCardProps {
99
description: string
1010
hooks: Array<string>
11+
img: string
1112
styling: string
1213
title: string
1314
to: string
@@ -20,19 +21,36 @@ export default function ExampleCard({
2021
title,
2122
description,
2223
hooks,
24+
img,
2325
styling,
2426
to,
2527
}: ExampleCardProps): JSX.Element {
2628
return (
2729
<Link to={to} style={{textDecoration: 'none'}}>
28-
<Card tone="neutral" paddingX={3} paddingY={4} radius={3}>
29-
<Stack space={4}>
30-
<Text as="h3" size={3} weight="medium" style={{color: hues.red['500'].hex}}>
31-
{title}
32-
</Text>
33-
<Text size={1}>{description}</Text>
34-
<ExampleAttributes hooks={hooks} styling={styling} />
35-
</Stack>
30+
<Card shadow={2} paddingX={2} paddingY={3} radius={3}>
31+
<Inline space={5}>
32+
<div
33+
style={{
34+
backgroundImage: `url(${img})`,
35+
backgroundSize: 'fit',
36+
backgroundRepeat: 'no-repeat',
37+
maskImage: 'linear-gradient(to bottom right, white, transparent)',
38+
maskMode: 'alpha',
39+
width: 200,
40+
height: 200,
41+
display: 'inline-block',
42+
}}
43+
/>
44+
<Stack space={4}>
45+
<Text as="h3" size={3} weight="medium" style={{color: hues.blue['500'].hex}}>
46+
{title}
47+
</Text>
48+
<Text size={1} muted>
49+
{description}
50+
</Text>
51+
<ExampleAttributes hooks={hooks} styling={styling} />
52+
</Stack>
53+
</Inline>
3654
</Card>
3755
</Link>
3856
)

‎apps/sdk-explorer/src/ExampleLayout.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Box, Heading, Stack} from '@sanity/ui'
1+
import {Box, Card, Heading, Stack, Text} from '@sanity/ui'
22
import {type JSX} from 'react'
33

44
import ExampleAttributes from './ExampleAttributes'
@@ -10,6 +10,7 @@ interface ExampleLayoutProps {
1010
codeUrl: string
1111
hooks: Array<string>
1212
styling: string
13+
summary: string
1314
}
1415

1516
/**
@@ -21,18 +22,27 @@ export default function ExampleLayout({
2122
codeUrl,
2223
hooks,
2324
styling,
25+
summary,
2426
}: ExampleLayoutProps): JSX.Element {
27+
// Scroll to top of view when component loads
2528
return (
26-
<Stack space={5} padding={4}>
29+
<Stack space={5}>
2730
<Heading as="h1" size={5} style={{fontWeight: '500'}}>
2831
{title}
2932
</Heading>
3033
<ExampleAttributes hooks={hooks} styling={styling} />
34+
<Box>
35+
<Text muted style={{maxInlineSize: '64ch'}}>
36+
{summary}
37+
</Text>
38+
</Box>
3139
<Box>
3240
<ViewCode url={codeUrl} />
3341
</Box>
3442
<hr style={{border: 'none', borderTop: '1px solid #ddd'}} />
35-
<Box>{children}</Box>
43+
<Card padding={4} radius={3} shadow={3}>
44+
{children}
45+
</Card>
3646
</Stack>
3747
)
3848
}

‎apps/sdk-explorer/src/Home.tsx

Lines changed: 56 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
import {Card, Container, Heading, Stack, Text} from '@sanity/ui'
1+
import {Box, Heading, Stack, Text} from '@sanity/ui'
22
import {type JSX} from 'react'
33

44
import ExampleCard from './ExampleCard'
5+
import DocumentTableImage from './images/DocumentTable.svg'
6+
import MoviesByActorImage from './images/MoviesByActor.svg'
7+
import PreviewGridImage from './images/PreviewGrid.svg'
8+
import PreviewListImage from './images/PreviewList.svg'
59

610
export default function Home(): JSX.Element {
711
return (
8-
<Container padding={4}>
12+
<Box>
913
<Stack space={5} paddingY={4}>
1014
<Heading
1115
as="h1"
@@ -17,73 +21,73 @@ export default function Home(): JSX.Element {
1721
>
1822
SDK Explorer
1923
</Heading>
20-
<Stack space={5}>
21-
<Text size={3} muted>
24+
<Stack space={5} style={{maxInlineSize: '64ch'}}>
25+
<Text size={2} muted>
2226
The Sanity App SDK Explorer contains an assortment of example interfaces built with our
2327
React SDK’s hooks. The purpose of the Explorer is to demonstrate how these hooks can be
2428
used to build out interfaces powered by Sanity, with a variety of approaches to styling.
2529
</Text>
26-
<Text size={3} muted>
30+
<Text size={2} muted>
2731
Each example contains an interface rendered in the browser as well as a link to the
2832
example’s code on GitHub to demonstrate how the example is built. Example code is
2933
enriched with comments and may freely be used in your own applications.
3034
</Text>
3135
</Stack>
3236
</Stack>
3337

34-
<Stack space={5} paddingY={4}>
35-
<Card padding={4} radius={2} shadow={3}>
36-
<Stack space={4}>
37-
<Text as="h2" size={4} weight="medium">
38-
Document collections
39-
</Text>
38+
<Stack space={6} paddingY={4}>
39+
<Stack space={5}>
40+
<Text as="h2" size={4} weight="medium">
41+
Document collections
42+
</Text>
4043

41-
<Stack space={3}>
42-
<ExampleCard
43-
to="/document-collections/document-table"
44-
title="Document table"
45-
description="A tabular rendering of documents and their content"
46-
hooks={['usePaginatedList', 'useProjection']}
47-
styling="Tailwind"
48-
/>
49-
<ExampleCard
50-
to="/document-collections/preview-list"
51-
title="Preview list"
52-
description="A list of document previews"
53-
hooks={['useInfiniteList', 'useProjection']}
54-
styling="Sanity UI"
55-
/>
56-
<ExampleCard
57-
to="/document-collections/preview-grid"
58-
title="Preview grid"
59-
description="A grid of document previews"
60-
hooks={['useInfiniteList', 'useProjection']}
61-
styling="Tailwind"
62-
/>
63-
</Stack>
44+
<Stack space={3}>
45+
<ExampleCard
46+
to="/document-collections/document-table"
47+
title="Document table"
48+
description="A tabular rendering of documents and their content"
49+
hooks={['usePaginatedList', 'useProjection']}
50+
styling="Tailwind"
51+
img={DocumentTableImage}
52+
/>
53+
<ExampleCard
54+
to="/document-collections/preview-list"
55+
title="Preview list"
56+
description="A list of document previews"
57+
hooks={['useInfiniteList', 'useProjection']}
58+
styling="Sanity UI"
59+
img={PreviewListImage}
60+
/>
61+
<ExampleCard
62+
to="/document-collections/preview-grid"
63+
title="Preview grid"
64+
description="A grid of document previews"
65+
hooks={['useInfiniteList', 'useProjection']}
66+
styling="Tailwind"
67+
img={PreviewGridImage}
68+
/>
6469
</Stack>
65-
</Card>
70+
</Stack>
6671
</Stack>
6772

68-
<Stack space={5} paddingY={4}>
69-
<Card padding={4} radius={2} shadow={3}>
70-
<Stack space={4}>
71-
<Text as="h2" size={4} weight="medium">
72-
GROQ
73-
</Text>
73+
<Stack space={6} paddingY={4}>
74+
<Stack space={5}>
75+
<Text as="h2" size={4} weight="medium">
76+
GROQ
77+
</Text>
7478

75-
<Stack space={3}>
76-
<ExampleCard
77-
to="/groq/movies-by-actor"
78-
title="Movies by actor"
79-
description="Use multiple useQuery hooks to fetch and filter data"
80-
hooks={['useQuery']}
81-
styling="Sanity UI"
82-
/>
83-
</Stack>
79+
<Stack space={3}>
80+
<ExampleCard
81+
to="/groq/movies-by-actor"
82+
title="Movies by actor"
83+
description="Use multiple useQuery hooks to fetch and filter data"
84+
hooks={['useQuery']}
85+
styling="Sanity UI"
86+
img={MoviesByActorImage}
87+
/>
8488
</Stack>
85-
</Card>
89+
</Stack>
8690
</Stack>
87-
</Container>
91+
</Box>
8892
)
8993
}

‎apps/sdk-explorer/src/ScollOnPathChange.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {useEffect} from 'react'
2+
import {useLocation} from 'react-router'
3+
4+
export default function ScrollOnPathChange(): null {
5+
const {pathname} = useLocation()
6+
7+
useEffect(() => {
8+
window.scrollTo(0, 0)
9+
}, [pathname])
10+
11+
return null
12+
}

‎apps/sdk-explorer/src/ViewCode.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function ViewCode({url}: {url: string}): JSX.Element {
1010
as="a"
1111
href={url}
1212
target="_blank"
13-
mode="ghost"
13+
tone="primary"
1414
text="View the code on GitHub"
1515
fontSize={2}
1616
padding={4}

0 commit comments

Comments
 (0)