sanity-plugin-smart-asset-manager 1.0.0

package/src/components/common/Icons.tsx

@@ -0,0 +1,239 @@
+import React from 'react'
+
+export type IconProps = React.SVGProps<SVGSVGElement>
+
+export const SearchIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <circle cx="11" cy="11" r="8"></circle>
+    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+  </svg>
+)
+
+export const TrashIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <polyline points="3 6 5 6 21 6"></polyline>
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+    <line x1="10" y1="11" x2="10" y2="17"></line>
+    <line x1="14" y1="11" x2="14" y2="17"></line>
+  </svg>
+)
+
+export const InfoOutlineIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <line x1="12" y1="16" x2="12" y2="12"></line>
+    <line x1="12" y1="8" x2="12.01" y2="8"></line>
+  </svg>
+)
+
+export const WarningIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+    <line x1="12" y1="9" x2="12" y2="13"></line>
+    <line x1="12" y1="17" x2="12.01" y2="17"></line>
+  </svg>
+)
+
+export const LinkIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+  </svg>
+)
+
+export const ResetIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M1 4v6h6"></path>
+    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
+  </svg>
+)
+
+export const DocumentsIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+    <polyline points="14 2 14 8 20 8"></polyline>
+    <line x1="16" y1="13" x2="8" y2="13"></line>
+    <line x1="16" y1="17" x2="8" y2="17"></line>
+    <polyline points="10 9 9 9 8 9"></polyline>
+  </svg>
+)
+
+export const DownloadIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+    <polyline points="7 10 12 15 17 10"></polyline>
+    <line x1="12" y1="15" x2="12" y2="3"></line>
+  </svg>
+)
+
+export const FolderIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+  </svg>
+)
+
+export const UploadIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+    <polyline points="17 8 12 3 7 8"></polyline>
+    <line x1="12" y1="3" x2="12" y2="15"></line>
+  </svg>
+)
+
+export const PdfIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+    <polyline points="14 2 14 8 20 8"></polyline>
+    <path d="M9 15h3a2 2 0 0 0 2-2V13a2 2 0 0 0-2-2H9v4z"></path>
+    <line x1="9" y1="11" x2="9" y2="17"></line>
+  </svg>
+)
+
+export const AudioIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M9 18V5l12-2v13"></path>
+    <circle cx="6" cy="18" r="3"></circle>
+    <circle cx="18" cy="16" r="3"></circle>
+  </svg>
+)
+
+export const SortIcon = (props: IconProps) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <line x1="11" y1="5" x2="21" y2="5"></line>
+    <line x1="11" y1="9" x2="18" y2="9"></line>
+    <line x1="11" y1="13" x2="15" y2="13"></line>
+    <line x1="3" y1="17" x2="21" y2="17"></line>
+    <polyline points="7 5 3 9 7 13"></polyline>
+    <line x1="3" y1="9" x2="3" y2="1"></line>
+  </svg>
+)

package/src/components/tabs/SizeAnalyzer.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import {Stack, Heading, Card, Box, Flex, Text, Badge, Button} from '@sanity/ui'
+import type {Asset} from '@/types'
+import {formatBytes} from '@/utils/formatBytes'
+import {DocumentsIcon, PdfIcon, AudioIcon, SortIcon} from '@/components/common/Icons'
+import styled from 'styled-components'
+
+const TableCard = styled(Card)`
+  border: 1px solid var(--card-border-color);
+`
+
+const TableHeader = styled(Box)`
+  border-bottom: 1px solid var(--card-border-color);
+`
+
+const TableRow = styled(Flex)<{$isLast?: boolean}>`
+  border-bottom: ${(props) => (props.$isLast ? 'none' : '1px solid var(--card-border-color)')};
+  transition: background 0.2s ease;
+  &:hover {
+    background: var(--card-bg-color);
+    filter: brightness(0.95);
+  }
+`
+
+const Thumbnail = styled.img`
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 4px;
+  background-color: var(--card-border-color);
+`
+
+interface SizeAnalyzerProps {
+  assets: Asset[]
+}
+
+export const SizeAnalyzer: React.FC<SizeAnalyzerProps> = ({assets}) => {
+  const [sortOrder, setSortOrder] = React.useState<'desc' | 'asc'>('desc')
+
+  const sortedAssets = React.useMemo(() => {
+    return [...assets].sort((a, b) => {
+      return sortOrder === 'desc' ? b.size - a.size : a.size - b.size
+    })
+  }, [assets, sortOrder])
+
+  const toggleSort = () => {
+    setSortOrder((prev) => (prev === 'desc' ? 'asc' : 'desc'))
+  }
+
+  return (
+    <Stack space={4}>
+      <Heading size={1}>Image Size Analysis</Heading>
+      <TableCard border radius={2}>
+        <TableHeader padding={2}>
+          <Flex align="center" gap={3}>
+            <Box style={{flex: 1}} paddingLeft={3}>
+              <Text size={1} weight="bold">
+                File
+              </Text>
+            </Box>
+            <Box style={{width: '120px'}}>
+              <Text size={1} weight="bold">
+                Dimensions
+              </Text>
+            </Box>
+            <Box style={{width: '140px'}}>
+              <Flex align="center" gap={1}>
+                <Text size={1} weight="bold">
+                  Weight
+                </Text>
+                <Button
+                  icon={SortIcon}
+                  mode="bleed"
+                  padding={2}
+                  onClick={toggleSort}
+                  fontSize={1}
+                  title={`Sort by weight ${sortOrder === 'desc' ? 'Ascending' : 'Descending'}`}
+                  style={{transform: sortOrder === 'asc' ? 'rotate(180deg)' : 'none'}}
+                />
+              </Flex>
+            </Box>
+          </Flex>
+        </TableHeader>
+        {sortedAssets.slice(0, 50).map((asset, i) => (
+          <TableRow
+            key={asset._id}
+            padding={3}
+            align="center"
+            gap={3}
+            $isLast={i === (sortedAssets.length < 50 ? sortedAssets.length - 1 : 49)}
+          >
+            {asset._type === 'sanity.imageAsset' ? (
+              <Thumbnail src={`${asset.url}?w=40&h=40&fit=crop`} alt="" />
+            ) : (
+              <Box
+                style={{
+                  width: '40px',
+                  height: '40px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: 'var(--card-border-color)',
+                  borderRadius: '4px',
+                }}
+              >
+                {asset.mimeType?.startsWith('video/') ? (
+                  <DocumentsIcon style={{fontSize: '20px', color: '#3b82f6'}} />
+                ) : asset.mimeType?.startsWith('audio/') ? (
+                  <AudioIcon style={{fontSize: '20px', color: '#ef4444'}} />
+                ) : asset.extension === 'pdf' || asset.mimeType === 'application/pdf' ? (
+                  <PdfIcon style={{fontSize: '20px', color: '#ef4444'}} />
+                ) : (
+                  <DocumentsIcon style={{fontSize: '20px', color: '#9ca3af'}} />
+                )}
+              </Box>
+            )}
+            <Box style={{flex: 1}}>
+              <Text size={1} weight="semibold">
+                {asset.originalFilename || asset._id}
+              </Text>
+            </Box>
+            <Box style={{width: '120px'}}>
+              <Text size={1}>
+                {asset.metadata?.dimensions?.width || '—'} x{' '}
+                {asset.metadata?.dimensions?.height || '—'}
+              </Text>
+            </Box>
+            <Box style={{width: '140px'}}>
+              <Badge
+                tone={
+                  asset.size > 1048576 ? 'critical' : asset.size > 500000 ? 'caution' : 'positive'
+                }
+              >
+                {formatBytes(asset.size)}
+              </Badge>
+            </Box>
+          </TableRow>
+        ))}
+      </TableCard>
+    </Stack>
+  )
+}

package/src/components/tabs/UnusedAssets.tsx

@@ -0,0 +1,129 @@
+import React, {useState} from 'react'
+import {Stack, Flex, Heading, Button, Card, Text, Grid, Dialog, Box, Checkbox} from '@sanity/ui'
+import type {Asset} from '@/types'
+import {TrashIcon} from '@/components/common/Icons'
+import {AssetCard} from '@/components/AssetCard'
+
+interface UnusedAssetsProps {
+  unusedAssets: Asset[]
+  onBulkDelete: (ids: string[]) => void
+  onAssetClick: (asset: Asset) => void
+}
+
+export const UnusedAssets: React.FC<UnusedAssetsProps> = ({
+  unusedAssets,
+  onBulkDelete,
+  onAssetClick,
+}) => {
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const [confirmDelete, setConfirmDelete] = useState<{show: boolean; ids: string[]}>({
+    show: false,
+    ids: [],
+  })
+
+  const handleSelect = (id: string, selected: boolean) => {
+    setSelectedIds((prev) => (selected ? [...prev, id] : prev.filter((i) => i !== id)))
+  }
+
+  const handleSelectAll = (checked: boolean) => {
+    setSelectedIds(checked ? unusedAssets.map((a) => a._id) : [])
+  }
+
+  const triggerBulkDelete = (ids: string[]) => {
+    setConfirmDelete({show: true, ids})
+  }
+
+  const handleConfirmDelete = () => {
+    onBulkDelete(confirmDelete.ids)
+    setSelectedIds((prev) => prev.filter((id) => !confirmDelete.ids.includes(id)))
+    setConfirmDelete({show: false, ids: []})
+  }
+
+  return (
+    <Stack space={4}>
+      <Flex align="center" justify="space-between">
+        <Stack space={3}>
+          <Heading size={1}>Bulk Deletion of Unused Assets</Heading>
+          {unusedAssets.length > 0 && (
+            <Flex align="center" gap={3}>
+              <Checkbox
+                id="select-all-unused"
+                checked={selectedIds.length === unusedAssets.length && unusedAssets.length > 0}
+                indeterminate={selectedIds.length > 0 && selectedIds.length < unusedAssets.length}
+                onChange={(e) => handleSelectAll(e.currentTarget.checked)}
+              />
+              <Text size={1} weight="semibold" muted>
+                {selectedIds.length > 0 ? `${selectedIds.length} Selected` : 'Select All'}
+              </Text>
+            </Flex>
+          )}
+        </Stack>
+
+        <Flex gap={2}>
+          {selectedIds.length > 0 && (
+            <Button
+              icon={TrashIcon}
+              tone="critical"
+              text={`Delete Selected (${selectedIds.length})`}
+              onClick={() => triggerBulkDelete(selectedIds)}
+            />
+          )}
+          {unusedAssets.length > 0 && selectedIds.length !== unusedAssets.length && (
+            <Button
+              mode="ghost"
+              icon={TrashIcon}
+              tone="critical"
+              text={`Delete All Unused (${unusedAssets.length})`}
+              onClick={() => triggerBulkDelete(unusedAssets.map((a) => a._id))}
+            />
+          )}
+        </Flex>
+      </Flex>
+
+      {unusedAssets.length === 0 ? (
+        <Card padding={5} border radius={3}>
+          <Text align="center">No unused assets found.</Text>
+        </Card>
+      ) : (
+        <Grid columns={[2, 3, 4, 5, 6]} gap={3}>
+          {unusedAssets.map((asset) => (
+            <AssetCard
+              key={asset._id}
+              asset={asset}
+              onClick={onAssetClick}
+              isSelected={selectedIds.includes(asset._id)}
+              onSelect={handleSelect}
+            />
+          ))}
+        </Grid>
+      )}
+
+      {confirmDelete.show && (
+        <Dialog
+          id="confirm-bulk-delete"
+          header={`Delete ${confirmDelete.ids.length} Asset(s)?`}
+          onClose={() => setConfirmDelete({show: false, ids: []})}
+          footer={
+            <Box padding={3}>
+              <Flex gap={2} justify="flex-end">
+                <Button
+                  text="Cancel"
+                  mode="ghost"
+                  onClick={() => setConfirmDelete({show: false, ids: []})}
+                />
+                <Button text="Delete Permanently" tone="critical" onClick={handleConfirmDelete} />
+              </Flex>
+            </Box>
+          }
+        >
+          <Box padding={4}>
+            <Text>
+              Are you sure you want to delete <strong>{confirmDelete.ids.length}</strong> asset(s)?
+              This action cannot be undone and will permanently remove them from your project.
+            </Text>
+          </Box>
+        </Dialog>
+      )}
+    </Stack>
+  )
+}

package/src/components/tabs/__tests__/SizeAnalyzer.test.tsx

@@ -0,0 +1,73 @@
+import {render, screen, fireEvent} from '@testing-library/react'
+import {describe, it, expect} from 'vitest'
+import {SizeAnalyzer} from '../SizeAnalyzer'
+import {ThemeProvider} from '@sanity/ui'
+import {buildTheme} from '@sanity/ui/theme'
+import React from 'react'
+
+const mockAssets = [
+  {
+    _id: 'asset-1',
+    _type: 'sanity.imageAsset',
+    url: 'https://example.com/small.jpg',
+    originalFilename: 'small.jpg',
+    size: 1024, // 1 KB
+    extension: 'jpg',
+    mimeType: 'image/jpeg',
+    metadata: {dimensions: {width: 10, height: 10}},
+  },
+  {
+    _id: 'asset-2',
+    _type: 'sanity.imageAsset',
+    url: 'https://example.com/medium.jpg',
+    originalFilename: 'medium.jpg',
+    size: 512000, // ~500 KB
+    extension: 'jpg',
+    mimeType: 'image/jpeg',
+    metadata: {dimensions: {width: 100, height: 100}},
+  },
+  {
+    _id: 'asset-3',
+    _type: 'sanity.imageAsset',
+    url: 'https://example.com/large.jpg',
+    originalFilename: 'large.jpg',
+    size: 2048576, // 2 MB
+    extension: 'jpg',
+    mimeType: 'image/jpeg',
+    metadata: {dimensions: {width: 1000, height: 1000}},
+  },
+]
+
+describe('SizeAnalyzer', () => {
+  const renderWithTheme = (ui: React.ReactElement) => {
+    return render(<ThemeProvider theme={buildTheme()}>{ui}</ThemeProvider>)
+  }
+
+  it('renders correctly with multiple assets', () => {
+    renderWithTheme(<SizeAnalyzer assets={mockAssets} />)
+
+    expect(screen.getByText('small.jpg')).toBeDefined()
+    expect(screen.getByText('medium.jpg')).toBeDefined()
+    expect(screen.getByText('large.jpg')).toBeDefined()
+  })
+
+  it('sorts assets by size correctly', () => {
+    renderWithTheme(<SizeAnalyzer assets={mockAssets} />)
+
+    // Initially descending by default
+    // We expect large first, then medium, then small
+    const renderedNames = screen.getAllByText(/jpg$/).map((el) => el.textContent)
+    expect(renderedNames).toEqual(['large.jpg', 'medium.jpg', 'small.jpg'])
+  })
+
+  it('toggles sort order', () => {
+    renderWithTheme(<SizeAnalyzer assets={mockAssets} />)
+
+    const sortButton = screen.getByTitle(/Sort by weight/)
+    fireEvent.click(sortButton)
+
+    // Now should be ascending
+    const renderedNames = screen.getAllByText(/jpg$/).map((el) => el.textContent)
+    expect(renderedNames).toEqual(['small.jpg', 'medium.jpg', 'large.jpg'])
+  })
+})

package/src/hooks/useAssets.ts

@@ -0,0 +1,75 @@
+import {useState, useEffect} from 'react'
+import type {SanityClient} from 'sanity'
+import type {Asset, AssetTypeFilter, SortOrder} from '@/types'
+
+export function useAssets(
+  sanityClient: SanityClient,
+  searchQuery: string,
+  sortBy: SortOrder,
+  type: AssetTypeFilter,
+  offset: number,
+  limit: number,
+) {
+  const [assets, setAssets] = useState<Asset[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+
+  const [refreshSeed, setRefreshSeed] = useState(0)
+  const refreshAssets = () => setRefreshSeed((s) => s + 1)
+
+  useEffect(() => {
+    async function fetchAssets() {
+      setLoading(true)
+      try {
+        let filterParts = ['_type in ["sanity.imageAsset", "sanity.fileAsset"]']
+
+        if (type === 'image') {
+          filterParts.push('_type == "sanity.imageAsset"')
+        } else if (type === 'file') {
+          filterParts.push(
+            '_type == "sanity.fileAsset" && !(mimeType match "video/*") && !(mimeType match "audio/*")',
+          )
+        } else if (type === 'video') {
+          filterParts.push('_type == "sanity.fileAsset" && mimeType match "video/*"')
+        } else if (type === 'audio') {
+          filterParts.push('_type == "sanity.fileAsset" && mimeType match "audio/*"')
+        }
+
+        if (searchQuery) {
+          filterParts.push('(originalFilename match $searchQuery || _id match $searchQuery)')
+        }
+
+        const filter = filterParts.join(' && ')
+        const countQuery = `count(*[${filter}])`
+        const query = `*[${filter}] | order(${sortBy} desc) [${offset}...${offset + limit}] {
+                                 _id,
+                                 _type,
+                                 url,
+                                 extension,
+                                 size,
+                                 mimeType,
+                                 originalFilename,
+                                 metadata {
+                                     dimensions
+                                 }
+                                 }`
+
+        const [totalCount, results] = await Promise.all([
+          sanityClient.fetch(countQuery, {searchQuery: `*${searchQuery}*`}),
+          sanityClient.fetch(query, {searchQuery: `*${searchQuery}*`}),
+        ])
+
+        setTotal(totalCount)
+        setAssets(results)
+      } catch (error) {
+        console.error('Error fetching assets:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchAssets()
+  }, [sanityClient, searchQuery, sortBy, type, refreshSeed, offset, limit])
+
+  return {assets, loading, total, refreshAssets}
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+import {definePlugin} from 'sanity'
+import {SmartAssetManagerTool} from '@/components/SmartAssetManagerTool'
+import {FolderIcon} from '@/components/common/Icons'
+
+export const smartAssetManager = definePlugin(() => {
+  return {
+    name: 'sanity-plugin-smart-asset-manager',
+    tools: [
+      {
+        name: 'smart-asset-manager',
+        title: 'Smart Asset Manager',
+        component: SmartAssetManagerTool,
+        icon: FolderIcon,
+      },
+    ],
+  }
+})

package/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'