Skip to content

Commit

Permalink
test(base): improve change connector workshop
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariuslundgard
mariuslundgard committed Sep 15, 2021
1 parent a6dbdcb commit b7c51c3
Showing 1 changed file with 117 additions and 65 deletions.
182 changes: 117 additions & 65 deletions packages/@sanity/base/src/change-indicators/__workshop__/changeConnector.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import {Path} from '@sanity/types/src'
import {Container, Flex, Stack, Text} from '@sanity/ui'
import React, {useCallback} from 'react'
import {Path} from '@sanity/types'
import {Card, Container, Flex, LayerProvider, Stack, Text} from '@sanity/ui'
import React, {useCallback, useState} from 'react'
import styled from 'styled-components'
import {ChangeIndicatorProvider} from '../ChangeIndicator'
import {ScrollContainer} from '../../components'
import {ChangeFieldWrapper} from '../ChangeFieldWrapper'
import {ChangeIndicator, ChangeIndicatorProvider} from '../ChangeIndicator'
import {ChangeConnectorRoot} from '../overlay/ChangeConnectorRoot'

const Root = styled(ChangeConnectorRoot)`
height: 100%;
overflow: auto;
outline: 1px solid var(--card-border-color);
position: relative;
`
Expand All @@ -16,78 +17,99 @@ export default function ChangeConnectorStory() {
const isReviewChangesOpen = true
const onOpenReviewChanges = useCallback(() => undefined, [])
const onSetFocus = useCallback(() => undefined, [])
const [focusPath, setFocusPath] = useState<Path>([])

return (
<Flex align="center" height="fill" justify="center" padding={4} sizing="border">
<Container height="fill" style={{maxHeight: 320}} width={0}>
<Root
isReviewChangesOpen={isReviewChangesOpen}
onOpenReviewChanges={onOpenReviewChanges}
onSetFocus={onSetFocus}
>
<Flex gap={3} padding={4}>
<Stack
flex={1}
padding={4}
space={4}
style={{outline: '1px solid var(--card-border-color)'}}
<LayerProvider>
<Card height="fill" tone="transparent">
<Flex align="center" height="fill" justify="center" padding={4} sizing="border">
<Container height="fill" style={{maxHeight: 320}} width={1}>
<Root
isReviewChangesOpen={isReviewChangesOpen}
onOpenReviewChanges={onOpenReviewChanges}
onSetFocus={onSetFocus}
>
<DebugField path={['title']} focusPath={['title']} value="Test" compareValue="Test">
<Text>Field A</Text>
</DebugField>
<Text>Field B</Text>
<Text>Field C</Text>
<Text>Field D</Text>
<Text>Field E</Text>
<Text>Field F</Text>
<Text>Field G</Text>
<Text>Field H</Text>
<Text>Field I</Text>
<Text>Field J</Text>
<Text>Field K</Text>
<Text>Field L</Text>
<Text>Field M</Text>
<Text>Field N</Text>
</Stack>
<Flex height="fill">
<Card
as={ScrollContainer}
data-ui="ScrollContainer"
flex={1}
overflow="auto"
padding={5}
style={{position: 'relative'}}
>
<Stack space={9}>
<DebugFormField
path={['a']}
focusPath={focusPath}
setFocusPath={setFocusPath}
value="A"
compareValue="B"
>
<Text>Field A</Text>
</DebugFormField>
<DebugFormField
path={['b']}
focusPath={focusPath}
setFocusPath={setFocusPath}
value="B"
compareValue="C"
>
<Text>Field B</Text>
</DebugFormField>
<DebugFormField
path={['c']}
focusPath={focusPath}
setFocusPath={setFocusPath}
value="C"
compareValue="D"
>
<Text>Field C</Text>
</DebugFormField>
</Stack>
</Card>

<Stack
flex={1}
padding={4}
space={4}
style={{outline: '1px solid var(--card-border-color)'}}
>
<DebugField path={['title']} focusPath={['title']} value="Test" compareValue="Test">
<Text>Field A</Text>
</DebugField>
<Text>Field B</Text>
<Text>Field C</Text>
<Text>Field D</Text>
<Text>Field E</Text>
<Text>Field F</Text>
<Text>Field G</Text>
<Text>Field H</Text>
<Text>Field I</Text>
<Text>Field J</Text>
<Text>Field K</Text>
<Text>Field L</Text>
<Text>Field M</Text>
<Text>Field N</Text>
</Stack>
</Flex>
</Root>
</Container>
</Flex>
<Card
as={ScrollContainer}
data-ui="ScrollContainer"
borderLeft
flex={1}
overflow="auto"
padding={5}
style={{position: 'relative'}}
>
<Stack flex={1} space={9}>
<DebugDiffField path={['a']}>
<Text>Diff A</Text>
</DebugDiffField>
<DebugDiffField path={['b']}>
<Text>Diff B</Text>
</DebugDiffField>
<DebugDiffField path={['c']}>
<Text>Diff C</Text>
</DebugDiffField>
</Stack>
</Card>
</Flex>
</Root>
</Container>
</Flex>
</Card>
</LayerProvider>
)
}

function DebugField(props: {
function DebugFormField(props: {
children?: React.ReactNode
focusPath: Path
path: Path
value: unknown
compareValue: unknown
setFocusPath: (p: Path) => void
}) {
const {children, focusPath, path, value, compareValue} = props
const {children, focusPath, path, value, compareValue, setFocusPath} = props
const handleBlur = useCallback(() => setFocusPath([]), [setFocusPath])
const handleFocus = useCallback(() => setFocusPath(path), [path, setFocusPath])

return (
<ChangeIndicatorProvider
Expand All @@ -96,7 +118,37 @@ function DebugField(props: {
value={value}
compareValue={compareValue}
>
<div style={{outline: '1px solid var(--card-border-color)'}}>{children}</div>
<ChangeIndicator>
<Card border onBlur={handleBlur} onFocus={handleFocus} padding={3} radius={1} tabIndex={0}>
{children}
</Card>
</ChangeIndicator>
</ChangeIndicatorProvider>
)
}

function DebugDiffField(props: {children?: React.ReactNode; path: Path}) {
const {children, path} = props
const [hovered, setHovered] = useState(false)

const handleMouseEnter = useCallback(() => setHovered(true), [])
const handleMouseLeave = useCallback(() => setHovered(false), [])

const handleClick = useCallback(() => {
//
}, [])

return (
<ChangeFieldWrapper hasHover={hovered} path={path}>
<Card
borderLeft
onClick={handleClick}
padding={3}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{children}
</Card>
</ChangeFieldWrapper>
)
}

3 comments on commit b7c51c3

@vercel
Copy link

@vercel vercel bot commented on b7c51c3 Sep 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

studio-workshop – ./dev/workshop

studio-workshop.sanity.build
studio-workshop-git-next.sanity.build

@vercel
Copy link

@vercel vercel bot commented on b7c51c3 Sep 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

perf-studio – ./

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

@vercel
Copy link

@vercel vercel bot commented on b7c51c3 Sep 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

test-studio – ./

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

Please sign in to comment.