sanity-plugin-smart-asset-manager 1.0.0

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "sanity-plugin-smart-asset-manager",
+  "version": "1.0.0",
+  "description": "An advanced asset management plugin for Sanity Studio with smart filtering, size analysis, unused asset detection, broken asset checks, and usage tracking.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react,react-dom,sanity,@sanity/ui,styled-components",
+    "prepublishOnly": "npm run build",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react,react-dom,sanity,@sanity/ui,styled-components"
+  },
+  "keywords": [
+    "sanity",
+    "sanity-plugin",
+    "asset-management",
+    "media-library",
+    "asset-manager",
+    "media-manager",
+    "sanity-plugin-smart-asset-manager"
+  ],
+  "author": "Code-Journey <codejourney.info@gmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "sanity": "^3.0.0 || ^4.0.0 || ^5.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "devDependencies": {
+    "@sanity/ui": "^3.1.13",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.14",
+    "@vitejs/plugin-react": "^5.1.4",
+    "jsdom": "^27.0.1",
+    "prettier": "^3.5.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "sanity": "^5.12.0",
+    "styled-components": "^6.1.8",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Code-Journey-77/sanity-plugin-smart-asset-manager"
+  },
+  "bugs": {
+    "url": "https://github.com/Code-Journey-77/sanity-plugin-smart-asset-manager/issues"
+  },
+  "homepage": "https://github.com/Code-Journey-77/sanity-plugin-smart-asset-manager#readme"
+}

package/src/components/AssetCard.tsx

@@ -0,0 +1,177 @@
+import React from 'react'
+import {Box, Flex, Stack, Text, Badge, Button, Card, Checkbox} from '@sanity/ui'
+import type {Asset} from '@/types'
+import {formatBytes} from '@/utils/formatBytes'
+import {DocumentsIcon, DownloadIcon, PdfIcon, AudioIcon} from '@/components/common/Icons'
+import styled from 'styled-components'
+
+const StyledCard = styled(Card)`
+  overflow: hidden;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  position: relative;
+  border: 1px solid
+    ${(props) => (props.selected ? 'var(--card-focus-ring-color)' : 'var(--card-border-color)')};
+  background-color: ${(props) => (props.selected ? 'var(--card-accent-bg-color)' : 'inherit')};
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+    border-color: var(--card-focus-ring-color);
+  }
+`
+
+const ImageContainer = styled(Box)`
+  width: 100%;
+  aspect-ratio: 1.25;
+  background-color: transparent;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid var(--card-border-color);
+  overflow: hidden;
+`
+
+const SelectOverlay = styled(Box)`
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 5;
+`
+
+const AssetPreview = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+
+  ${StyledCard}:hover & {
+    transform: scale(1.05);
+  }
+`
+
+const VideoPreview = styled.video`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: #000;
+`
+
+const ActionBar = styled(Flex)`
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  background: var(--card-bg-color);
+  opacity: 0.95;
+  backdrop-filter: blur(4px);
+  border-radius: 8px;
+  padding: 2px;
+  opacity: 0;
+  border: 1px solid var(--card-border-color);
+  transition: opacity 0.2s ease;
+
+  ${StyledCard}:hover & {
+    opacity: 1;
+  }
+`
+
+interface AssetCardProps {
+  asset: Asset
+  onClick: (asset: Asset) => void
+  isSelected?: boolean
+  onSelect?: (id: string, selected: boolean) => void
+}
+
+export const AssetCard: React.FC<AssetCardProps> = ({asset, onClick, isSelected, onSelect}) => {
+  const isImage = asset._type === 'sanity.imageAsset'
+  const isVideo = asset?.mimeType?.startsWith('video/')
+  const isAudio = asset?.mimeType?.startsWith('audio/')
+  const isPdf = asset?.extension === 'pdf' || asset?.mimeType === 'application/pdf'
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('button')) return
+    onClick(asset)
+  }
+
+  return (
+    <StyledCard radius={3} onClick={handleCardClick} selected={isSelected}>
+      <ImageContainer>
+        {onSelect && (
+          <SelectOverlay onClick={(e) => e.stopPropagation()}>
+            <Checkbox
+              checked={isSelected}
+              onChange={(e) => onSelect(asset._id, e.target.checked)}
+            />
+          </SelectOverlay>
+        )}
+        {isImage ? (
+          <AssetPreview
+            src={`${asset.url}?w=400&h=320&fit=crop`}
+            alt={asset.originalFilename || ''}
+          />
+        ) : isVideo ? (
+          <VideoPreview src={asset.url} muted playsInline />
+        ) : (
+          <Flex
+            direction="column"
+            align="center"
+            justify="center"
+            gap={3}
+            style={{height: '100%', width: '100%'}}
+          >
+            {isPdf ? (
+              <PdfIcon
+                style={{
+                  fontSize: '48px',
+                  color: '#ef4444',
+                }}
+              />
+            ) : isAudio ? (
+              <AudioIcon
+                style={{
+                  fontSize: '48px',
+                  color: '#ef4444',
+                }}
+              />
+            ) : (
+              <DocumentsIcon
+                style={{
+                  fontSize: '48px',
+                  color: '#9ca3af',
+                }}
+              />
+            )}
+            <Text size={1} weight="bold" muted>
+              {(asset.extension || asset.mimeType?.split('/')[1])?.toUpperCase() || 'OTHER'}
+            </Text>
+          </Flex>
+        )}
+        <ActionBar gap={1}>
+          <Button
+            icon={DownloadIcon}
+            mode="bleed"
+            fontSize={1}
+            padding={2}
+            onClick={(e) => {
+              e.stopPropagation()
+              window.open(asset.url)
+            }}
+          />
+        </ActionBar>
+      </ImageContainer>
+      <Box padding={3}>
+        <Stack space={3}>
+          <Flex align="center" direction="column" gap={2}>
+            <Text size={1} weight="semibold" textOverflow="ellipsis" style={{flex: 1}}>
+              {asset.originalFilename || asset._id.substring(0, 10)}
+            </Text>
+            <Badge tone={asset.size > 1048576 ? 'caution' : 'default'} fontSize={0}>
+              {formatBytes(asset.size)}
+            </Badge>
+          </Flex>
+        </Stack>
+      </Box>
+    </StyledCard>
+  )
+}

package/src/components/AssetDetailsDialog.tsx

@@ -0,0 +1,423 @@
+import React, {useState, useEffect} from 'react'
+import {
+  Box,
+  Flex,
+  Stack,
+  Text,
+  Badge,
+  Button,
+  Dialog,
+  TextInput,
+  Label,
+  Card,
+  Grid,
+  Spinner,
+  useToast,
+  Tooltip,
+} from '@sanity/ui'
+import type {Asset, ReferencedDocument} from '@/types'
+import {formatBytes} from '@/utils/formatBytes'
+import {DocumentsIcon, DownloadIcon, TrashIcon, PdfIcon, AudioIcon} from '@/components/common/Icons'
+import {type SanityClient} from 'sanity'
+import {useRouter} from 'sanity/router'
+import {getAssetUsage, updateAssetFilename} from '@/utils/assetQueries'
+import styled from 'styled-components'
+
+const PreviewContainer = styled(Box)`
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  margin-bottom: 16px;
+  border: 1px solid var(--card-border-color);
+`
+
+const PreviewImage = styled.img`
+  max-width: 100%;
+  max-height: 400px;
+  object-fit: contain;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+`
+
+const VideoPreview = styled.video`
+  max-width: 100%;
+  max-height: 400px;
+  object-fit: contain;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: #000;
+`
+
+const PdfPreview = styled.iframe`
+  width: 100%;
+  height: 400px;
+  border: none;
+  border-radius: 4px;
+`
+
+const AudioPreview = styled.audio`
+  width: 100%;
+  margin-top: 16px;
+`
+
+const UsageCard = styled(Card)`
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  border: 1px solid var(--card-border-color);
+  &:hover {
+    background: var(--card-bg-color);
+    border-color: var(--card-focus-ring-color);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+  }
+`
+
+const ViewText = styled(Text)`
+  transition: all 0.2s ease;
+  color: var(--card-focus-ring-color);
+`
+
+interface AssetDetailsDialogProps {
+  asset: Asset
+  onClose: () => void
+  sanityClient: SanityClient
+  onUpdate: (id: string, newName: string) => void
+  onDelete: (id: string) => void
+}
+
+export const AssetDetailsDialog: React.FC<AssetDetailsDialogProps> = ({
+  asset,
+  onClose,
+  sanityClient,
+  onUpdate,
+  onDelete,
+}) => {
+  const [newName, setNewName] = useState(asset.originalFilename || '')
+  const [isUpdating, setIsUpdating] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [usage, setUsage] = useState<ReferencedDocument[]>([])
+  const [loadingUsage, setLoadingUsage] = useState(true)
+  const toast = useToast()
+  const router = useRouter()
+
+  useEffect(() => {
+    async function fetchUsage() {
+      setLoadingUsage(true)
+      try {
+        const results = await getAssetUsage(sanityClient, asset._id)
+        setUsage(results)
+      } catch (err) {
+        console.error(err)
+      } finally {
+        setLoadingUsage(false)
+      }
+    }
+    fetchUsage()
+  }, [asset._id, sanityClient])
+
+  const handleUpdate = async () => {
+    if (!newName.trim()) return
+    setIsUpdating(true)
+    try {
+      await updateAssetFilename(sanityClient, asset._id, newName)
+      onUpdate(asset._id, newName)
+      toast.push({
+        status: 'success',
+        title: 'Filename updated',
+      })
+    } catch (err) {
+      toast.push({
+        status: 'error',
+        title: 'Failed to update filename',
+      })
+    } finally {
+      setIsUpdating(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    setIsDeleting(true)
+    try {
+      onDelete(asset._id)
+      onClose()
+      toast.push({
+        status: 'success',
+        title: 'Asset deleted',
+      })
+    } catch (err) {
+      toast.push({
+        status: 'error',
+        title: 'Failed to delete asset',
+      })
+    } finally {
+      setIsDeleting(false)
+      setConfirmDelete(false)
+    }
+  }
+
+  const handleDocClick = (docId: string, docType: string) => {
+    if (router && typeof router.navigateIntent === 'function') {
+      router.navigateIntent('edit', {id: docId, type: docType})
+      onClose()
+    } else {
+      // Fallback for cases where router might not be fully available
+      window.location.hash = `intent/edit/id=${docId};type=${docType}`
+      onClose()
+    }
+  }
+
+  const isImage = asset._type === 'sanity.imageAsset'
+  const isVideo = asset?.mimeType?.startsWith('video/')
+  const isAudio = asset?.mimeType?.startsWith('audio/')
+  const isPdf = asset?.extension === 'pdf' || asset?.mimeType === 'application/pdf'
+
+  return (
+    <Dialog
+      id="asset-details-dialog"
+      header="Asset Details"
+      onClose={onClose}
+      width={2}
+      footer={
+        <Box padding={3}>
+          <Flex justify="space-between" align="center">
+            <Tooltip
+              content={
+                <Box padding={2} style={{maxWidth: '350px'}}>
+                  <Text size={1}>
+                    {usage.length > 0
+                      ? 'This asset is being used by documents and cannot be deleted. Remove all references first.'
+                      : 'Delete this asset permanently'}
+                  </Text>
+                </Box>
+              }
+              placement="top"
+              portal
+            >
+              <Box>
+                <Button
+                  icon={TrashIcon}
+                  text="Delete Asset"
+                  tone="critical"
+                  mode="ghost"
+                  onClick={() => setConfirmDelete(true)}
+                  disabled={usage.length > 0 || loadingUsage}
+                />
+              </Box>
+            </Tooltip>
+            <Flex gap={2}>
+              <Button text="Close" mode="ghost" onClick={onClose} />
+            </Flex>
+          </Flex>
+        </Box>
+      }
+    >
+      <Box padding={4}>
+        {confirmDelete && (
+          <Dialog
+            id="confirm-asset-delete"
+            header="Delete Asset?"
+            onClose={() => setConfirmDelete(false)}
+            footer={
+              <Box padding={3}>
+                <Flex gap={2} justify="flex-end">
+                  <Button text="Cancel" mode="ghost" onClick={() => setConfirmDelete(false)} />
+                  <Button
+                    text="Delete Permanently"
+                    tone="critical"
+                    onClick={handleDelete}
+                    loading={isDeleting}
+                  />
+                </Flex>
+              </Box>
+            }
+          >
+            <Box padding={4}>
+              <Text>
+                Are you sure you want to delete{' '}
+                <strong>{asset.originalFilename || 'this asset'}</strong>? This action cannot be
+                undone.
+              </Text>
+            </Box>
+          </Dialog>
+        )}
+        <Grid columns={[1, 1, 2]} gap={4}>
+          <Stack space={4}>
+            <PreviewContainer>
+              {isImage ? (
+                <PreviewImage src={`${asset.url}?w=800`} alt="" />
+              ) : isVideo ? (
+                <VideoPreview src={asset.url} controls muted playsInline />
+              ) : isPdf ? (
+                <PdfPreview src={asset.url} title="PDF Preview" />
+              ) : isAudio ? (
+                <Flex direction="column" align="center" gap={4} style={{width: '100%'}}>
+                  <AudioIcon style={{fontSize: '64px', color: '#ef4444'}} />
+                  <AudioPreview src={asset.url} controls />
+                </Flex>
+              ) : (
+                <Flex
+                  direction="column"
+                  align="center"
+                  justify="center"
+                  gap={3}
+                  style={{height: '300px', width: '100%'}}
+                >
+                  {isPdf ? (
+                    <PdfIcon style={{fontSize: '80px', color: '#ef4444'}} />
+                  ) : isAudio ? (
+                    <AudioIcon style={{fontSize: '80px', color: '#ef4444'}} />
+                  ) : (
+                    <DocumentsIcon
+                      style={{
+                        fontSize: '80px',
+                        color: '#9ca3af',
+                      }}
+                    />
+                  )}
+                </Flex>
+              )}
+            </PreviewContainer>
+
+            <Stack space={3}>
+              <Box>
+                <Label size={1}>Original Filename</Label>
+                <Flex gap={2} marginTop={2}>
+                  <Box style={{flex: 1}}>
+                    <TextInput
+                      value={newName}
+                      onChange={(e) => setNewName(e.currentTarget.value)}
+                      placeholder="Enter filename..."
+                    />
+                  </Box>
+                  <Button
+                    text="Save"
+                    tone="primary"
+                    onClick={handleUpdate}
+                    loading={isUpdating}
+                    disabled={newName === asset.originalFilename}
+                  />
+                </Flex>
+              </Box>
+
+              <Card padding={3} border radius={2}>
+                <Stack space={3}>
+                  <Text weight="bold" size={1}>
+                    File Information
+                  </Text>
+                  <Stack space={3}>
+                    <Flex align="flex-start" gap={3}>
+                      <Box style={{minWidth: '85px'}}>
+                        <Text size={1} muted>
+                          ID:
+                        </Text>
+                      </Box>
+                      <Box flex={1}>
+                        <Text size={1} style={{wordBreak: 'break-all'}}>
+                          {asset._id}
+                        </Text>
+                      </Box>
+                    </Flex>
+
+                    <Flex align="center" gap={3}>
+                      <Box style={{minWidth: '85px'}}>
+                        <Text size={1} muted>
+                          Type:
+                        </Text>
+                      </Box>
+                      <Box flex={1}>
+                        <Badge tone="primary" mode="outline" fontSize={0}>
+                          {(asset.extension || asset.mimeType?.split('/')[1])?.toUpperCase() ||
+                            'OTHER'}
+                        </Badge>
+                      </Box>
+                    </Flex>
+
+                    <Flex align="center" gap={3}>
+                      <Box style={{minWidth: '85px'}}>
+                        <Text size={1} muted>
+                          Size:
+                        </Text>
+                      </Box>
+                      <Box flex={1}>
+                        <Text size={1}>{formatBytes(asset.size)}</Text>
+                      </Box>
+                    </Flex>
+
+                    {asset.metadata?.dimensions && (
+                      <Flex align="center" gap={3}>
+                        <Box style={{minWidth: '85px'}}>
+                          <Text size={1} muted>
+                            Dimensions:
+                          </Text>
+                        </Box>
+                        <Box flex={1}>
+                          <Text size={1}>
+                            {asset.metadata.dimensions.width} × {asset.metadata.dimensions.height}{' '}
+                            px
+                          </Text>
+                        </Box>
+                      </Flex>
+                    )}
+                  </Stack>
+                  <Button
+                    icon={DownloadIcon}
+                    text="Download File"
+                    mode="ghost"
+                    onClick={() => window.open(asset.url)}
+                  />
+                </Stack>
+              </Card>
+            </Stack>
+          </Stack>
+
+          <Stack space={4}>
+            <Text weight="bold" size={1}>
+              Usage in Documents
+            </Text>
+            {loadingUsage ? (
+              <Flex align="center" justify="center" style={{padding: '40px'}}>
+                <Spinner />
+              </Flex>
+            ) : usage?.length > 0 ? (
+              <Stack space={2} style={{maxHeight: '500px', overflowY: 'auto'}}>
+                {usage?.map((doc) => (
+                  <UsageCard
+                    key={doc._id}
+                    padding={3}
+                    border
+                    radius={2}
+                    onClick={() => handleDocClick(doc._id, doc._type)}
+                  >
+                    <Flex align="center" justify="space-between" gap={3}>
+                      <Flex direction="column" align="flex-start" gap={2}>
+                        <Text size={1} weight="semibold">
+                          {doc.title}
+                        </Text>
+                        <Badge tone="caution" fontSize={0}>
+                          {doc._type}
+                        </Badge>
+                      </Flex>
+                      <Flex align="center" gap={3}>
+                        <ViewText size={0} weight="bold" className="view-text">
+                          VIEW →
+                        </ViewText>
+                      </Flex>
+                    </Flex>
+                  </UsageCard>
+                ))}
+              </Stack>
+            ) : (
+              <Card padding={4} border radius={2} tone="transparent" style={{textAlign: 'center'}}>
+                <Text size={1} muted>
+                  No references found for this asset.
+                </Text>
+              </Card>
+            )}
+          </Stack>
+        </Grid>
+      </Box>
+    </Dialog>
+  )
+}