Skip to content

feat(shopify-assets)!: migrate react-photo-album to v3 catalog #1822

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
stipsan wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(shopify-assets)!: migrate react-photo-album to v3 catalog #1822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/shopify-assets-react-photo-album-v3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"sanity-plugin-shopify-assets": major
---

Upgrade `react-photo-album` to v3 (`RowsPhotoAlbum` + built-in infinite scroll) and align with the shared catalog dependency
5 changes: 5 additions & 0 deletions .changeset/unsplash-react-photo-album-3-6-1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"sanity-plugin-asset-source-unsplash": patch
---

fix(deps): update dependency react-photo-album to ^3.6.1
4 changes: 1 addition & 3 deletions plugins/sanity-plugin-shopify-assets/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,7 @@
"axios": "^1.18.1",
"pretty-bytes": "^6.1.1",
"pretty-ms": "^8.0.0",
"react-infinite-scroll-component": "^6.1.1",
"react-photo-album": "^2.4.1",
"rxjs": "catalog:",
"react-photo-album": "catalog:",
"video.js": "catalog:"
},
"devDependencies": {
Expand Down
31 changes: 2 additions & 29 deletions plugins/sanity-plugin-shopify-assets/src/components/File.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,6 @@ import {Card} from '@sanity/ui'
import {getTheme_v2} from '@sanity/ui/theme'
import {styled} from 'styled-components'

export const Root = styled.div`
${({theme}) => {
const v2 = getTheme_v2({sanity: theme.sanity})
return `
background-color: ${v2.color.muted.bg};
border: 1px solid ${v2.color.border};
`
}};
overflow: hidden;
background-origin: content-box;
background-repeat: no-repeat;
background-clip: border-box;
background-size: cover;
position: relative;
outline: none !important;
box-sizing: content-box;
user-drag: none;

&:hover {
opacity: 0.85;
}

&:focus,
&:active {
border: 1px solid var(--input-border-color-focus);
box-shadow: inset 0 0 0 3px var(--input-border-color-focus);
}
`

export const InfoLine = styled(Card)`
${({theme}) => {
const v2 = getTheme_v2({sanity: theme.sanity})
Expand All @@ -46,6 +17,7 @@ export const InfoLine = styled(Card)`
left: 0;
max-width: 65%;
overflow-wrap: break-word;
pointer-events: none;

[data-ui='Text'] {
color: var(--infoline-fg);
Expand All @@ -65,6 +37,7 @@ export const DurationLine = styled(Card)`
background-color: var(--durationline-bg);
top: 0;
right: 0;
pointer-events: none;

[data-ui='Text'] {
color: var(--durationline-fg);
Expand Down
43 changes: 9 additions & 34 deletions plugins/sanity-plugin-shopify-assets/src/components/File.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,29 @@
import {Text} from '@sanity/ui'
import prettyBytes from 'pretty-bytes'
import prettyMilliseconds from 'pretty-ms'
import {useCallback, useRef} from 'react'

import type {Asset, ShopifyFile} from '../types'
import type {ShopifyFile} from '../types'
import {extractName} from '../utils/helpers'
import {DurationLine, InfoLine, Root} from './File.styled'
import {DurationLine, InfoLine} from './File.styled'

type Props = {
data: ShopifyFile
width: number
height: number
onClick: (file: Asset) => void
}

export default function File(props: Props) {
const {onClick, data, width, height} = props
const rootElm = useRef<HTMLDivElement>(null)

const {preview, meta} = data
export default function File({data}: {data: ShopifyFile}) {
const filename = extractName(data.url)

const handleClick = useCallback(() => {
onClick({...data, filename})
}, [onClick, data, filename])
const {meta} = data

return (
<Root
ref={rootElm}
title={filename}
tabIndex={0}
style={{
width: `${width}px`,
height: `${height}px`,
backgroundImage: `url("${preview?.url}")`,
}}
onClick={handleClick}
>
<>
<InfoLine padding={2} radius={2} margin={2}>
<Text size={1} title={`Select ${filename}`}>
{filename} {meta.fileSize && `(${prettyBytes(meta.fileSize)})`}
{filename} {meta.fileSize ? `(${prettyBytes(meta.fileSize)})` : null}
</Text>
</InfoLine>
{meta.duration && (
{meta.duration ? (
<DurationLine padding={2} radius={2} margin={2}>
<Text size={1} title={`Video duration: ${filename}`}>
{prettyMilliseconds(meta.duration, {colonNotation: true, secondsDecimalDigits: 0})}
</Text>
</DurationLine>
)}
</Root>
) : null}
</>
)
}
9 changes: 9 additions & 0 deletions plugins/sanity-plugin-shopify-assets/src/components/Loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import {Flex, Spinner} from '@sanity/ui'

export function Loader() {
return (
<Flex align="center" justify="center" padding={3}>
<Spinner muted />
</Flex>
)
}
Loading
Loading