-
Notifications
You must be signed in to change notification settings - Fork 435
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(corel): update releases detail screen
- Loading branch information
1 parent
e10f67b
commit 1ae631d
Showing
18 changed files
with
604 additions
and
379 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
packages/sanity/src/core/releases/tool/components/BadgeIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import {type IconComponent} from '@sanity/icons' | ||
| import {type BadgeTone} from '@sanity/ui' | ||
| import {createElement, type CSSProperties} from 'react' | ||
|
|
||
| export function BadgeIcon(props: {icon: IconComponent; tone: BadgeTone}) { | ||
| const {icon, tone} = props | ||
|
|
||
| return createElement(icon, { | ||
| style: { | ||
| '--card-icon-color': `var(--card-badge-${tone}-icon-color)`, | ||
| } as CSSProperties, | ||
| }) | ||
| } |
24 changes: 24 additions & 0 deletions
24
packages/sanity/src/core/releases/tool/components/ReleaseAvatar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import {DotIcon} from '@sanity/icons' | ||
| import {type BundleDocument} from 'sanity' | ||
|
|
||
| import {getReleaseTone} from '../../util/getReleaseTone' | ||
| import {VersionAvatar} from './VersionAvatar' | ||
|
|
||
| export function ReleaseAvatar({ | ||
| fontSize, | ||
| padding, | ||
| release, | ||
| }: { | ||
| fontSize?: number | ||
| padding?: number | ||
| release: BundleDocument | ||
| }) { | ||
| return ( | ||
| <VersionAvatar | ||
| fontSize={fontSize} | ||
| padding={padding} | ||
| icon={DotIcon} | ||
| tone={getReleaseTone(release)} | ||
| /> | ||
| ) | ||
| } |
23 changes: 23 additions & 0 deletions
23
packages/sanity/src/core/releases/tool/components/StatusItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import {Box, Card, Flex, Text} from '@sanity/ui' | ||
| import {type ReactNode} from 'react' | ||
|
|
||
| export function StatusItem(props: {avatar?: ReactNode; text: ReactNode}) { | ||
| const {avatar, text} = props | ||
|
|
||
| return ( | ||
| <Card> | ||
| <Flex> | ||
| {avatar && ( | ||
| <Box padding={1}> | ||
| <div style={{margin: -1}}>{avatar}</div> | ||
| </Box> | ||
| )} | ||
| <Box padding={2} paddingLeft={avatar ? 1 : undefined}> | ||
| <Text muted size={1}> | ||
| {text} | ||
| </Text> | ||
| </Box> | ||
| </Flex> | ||
| </Card> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 24 additions & 0 deletions
24
packages/sanity/src/core/releases/tool/components/VersionAvatar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import {type IconComponent} from '@sanity/icons' | ||
| import {type BadgeTone, Box, Text} from '@sanity/ui' | ||
|
|
||
| import {BadgeIcon} from './BadgeIcon' | ||
|
|
||
| export function VersionAvatar({ | ||
| fontSize = 1, | ||
| icon, | ||
| padding = 3, | ||
| tone = 'default', | ||
| }: { | ||
| fontSize?: number | ||
| padding?: number | ||
| icon: IconComponent | ||
| tone?: BadgeTone | ||
| }) { | ||
| return ( | ||
| <Box flex="none" padding={padding} style={{borderRadius: 3}}> | ||
| <Text size={fontSize}> | ||
| <BadgeIcon icon={icon} tone={tone} /> | ||
| </Text> | ||
| </Box> | ||
| ) | ||
| } |
14 changes: 14 additions & 0 deletions
14
packages/sanity/src/core/releases/tool/detail/ReleaseDashboardActivityPanel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import {Stack, Text} from '@sanity/ui' | ||
|
|
||
| export function ReleaseDashboardActivityPanel() { | ||
| return ( | ||
| <Stack space={3} padding={3}> | ||
| <Text size={1} weight="semibold"> | ||
| {'Activity'} | ||
| </Text> | ||
| <Text muted size={0}> | ||
| {'🚧 Under construction 🚧'} | ||
| </Text> | ||
| </Stack> | ||
| ) | ||
| } |
77 changes: 77 additions & 0 deletions
77
packages/sanity/src/core/releases/tool/detail/ReleaseDashboardDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import {PinFilledIcon, PinIcon} from '@sanity/icons' | ||
| import { | ||
| Box, | ||
| // Custom button with full radius used here | ||
| // eslint-disable-next-line no-restricted-imports | ||
| Button, | ||
| Card, | ||
| Container, | ||
| Flex, | ||
| Stack, | ||
| Text, | ||
| } from '@sanity/ui' | ||
| import {format} from 'date-fns' | ||
| import {useCallback} from 'react' | ||
| import {type BundleDocument, usePerspective, useTranslation} from 'sanity' | ||
|
|
||
| import {releasesLocaleNamespace} from '../../i18n' | ||
| import {getReleaseTone} from '../../util/getReleaseTone' | ||
| import {ReleaseAvatar} from '../components/ReleaseAvatar' | ||
| import {ReleaseDetailsEditor} from './ReleaseDetailsEditor' | ||
|
|
||
| export function ReleaseDashboardDetails({release}: {release: BundleDocument}) { | ||
| const {archived, _id, publishedAt} = release | ||
| const {t} = useTranslation(releasesLocaleNamespace) | ||
|
|
||
| const {currentGlobalBundle, setPerspective} = usePerspective() | ||
|
|
||
| const handlePinRelease = useCallback(() => { | ||
| if (_id === currentGlobalBundle._id) { | ||
| setPerspective('drafts') | ||
| } else { | ||
| setPerspective(_id) | ||
| } | ||
| }, [_id, currentGlobalBundle._id, setPerspective]) | ||
|
|
||
| return ( | ||
| <Container width={3}> | ||
| <Stack padding={3} paddingY={[4, 4, 5, 6]} space={[3, 3, 4, 5]}> | ||
| <Flex gap={1}> | ||
| <Button | ||
| disabled={publishedAt !== undefined || archived} | ||
| icon={_id === currentGlobalBundle._id ? PinFilledIcon : PinIcon} | ||
| mode="bleed" | ||
| onClick={handlePinRelease} | ||
| padding={2} | ||
| radius="full" | ||
| selected={_id === currentGlobalBundle._id} | ||
| space={2} | ||
| text={t('dashboard.details.pin-release')} | ||
| tone={getReleaseTone(release)} | ||
| /> | ||
|
|
||
| { | ||
| publishedAt ? ( | ||
| <Card padding={2} radius={2} tone="positive"> | ||
| <Flex flex={1} gap={2}> | ||
| <ReleaseAvatar padding={0} release={release} /> | ||
| <Text muted size={1} weight="medium"> | ||
| {t('dashboard.details.published-on', { | ||
| date: format(new Date(publishedAt), `MMM d, yyyy`), | ||
| })} | ||
| </Text> | ||
| </Flex> | ||
| </Card> | ||
| ) : null | ||
| // TODO: Add the release time field here | ||
| // <ReleaseTimeField onChange={handleTimeChange} release={release} value={timeValue} /> | ||
| } | ||
| </Flex> | ||
|
|
||
| <Box padding={2}> | ||
| <ReleaseDetailsEditor description={release.description} title={release.title} /> | ||
| </Box> | ||
| </Stack> | ||
| </Container> | ||
| ) | ||
| } |
39 changes: 39 additions & 0 deletions
39
packages/sanity/src/core/releases/tool/detail/ReleaseDashboardFooter.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import {Card, Flex} from '@sanity/ui' | ||
| import {type BundleDocument} from 'sanity' | ||
|
|
||
| import {ReleaseMenuButton} from '../components/ReleaseMenuButton/ReleaseMenuButton' | ||
| import {ReleasePublishAllButton} from '../components/ReleasePublishAllButton/ReleasePublishAllButton' | ||
| import {ReleaseStatusItems} from './ReleaseStatusItems' | ||
| import {type DocumentInBundleResult} from './useBundleDocuments' | ||
|
|
||
| export function ReleaseDashboardFooter(props: { | ||
| documents: DocumentInBundleResult[] | ||
| release: BundleDocument | ||
| isBundleDeleted: boolean | ||
| }) { | ||
| const {documents, release, isBundleDeleted} = props | ||
|
|
||
| return ( | ||
| <Card flex="none"> | ||
| <Card borderTop marginX={2} style={{opacity: 0.6}} /> | ||
|
|
||
| <Flex padding={3}> | ||
| <Flex flex={1} gap={1}> | ||
| <ReleaseStatusItems release={release} /> | ||
| </Flex> | ||
|
|
||
| <Flex flex="none" gap={1}> | ||
| {/* TODO: Replace this with the real actions. */} | ||
| {!isBundleDeleted && !release.publishedAt && ( | ||
| <ReleasePublishAllButton | ||
| bundle={release} | ||
| bundleDocuments={documents} | ||
| disabled={!documents.length} | ||
| /> | ||
| )} | ||
| <ReleaseMenuButton disabled={isBundleDeleted} bundle={release} /> | ||
| </Flex> | ||
| </Flex> | ||
| </Card> | ||
| ) | ||
| } |
Oops, something went wrong.