@liiift-studio/sanity-utilities 1.0.0

package/README.md

@@ -0,0 +1,102 @@
+# @liiift-studio/sanity-utilities
+
+Centralized Sanity utilities package for Liiift Studio foundry projects.
+
+## Overview
+
+This package provides a collection of powerful utilities for Sanity Studio that help manage and manipulate content across foundry projects. All utilities are designed with safety features including danger mode locks and confirmation dialogs for destructive operations.
+
+## Installation
+
+```bash
+npm install @liiift-studio/sanity-utilities
+```
+
+## Usage
+
+### Basic Usage
+
+Import and use the utilities desk in your Sanity config:
+
+```js
+import { UtilitiesDesk } from '@liiift-studio/sanity-utilities';
+
+// In your sanity.config.js desk structure
+S.listItem()
+	.title('Utilities')
+	.child(
+		S.component(UtilitiesDesk).title('Utilities')
+	)
+```
+
+### Available Components
+
+All utility components are exported individually if you need custom implementations:
+
+```js
+import {
+	ConvertIdsToSlug,
+	ConvertToWeakReferences,
+	DangerModeWarning,
+	DeleteUnusedAssets,
+	DuplicateAndRename,
+	ExportData,
+	GetFontData,
+	SearchAddData,
+	SearchAndDelete,
+	UtilitiesDesk
+} from '@liiift-studio/sanity-utilities';
+```
+
+## Utilities Included
+
+### 1. Convert IDs to Slug
+Converts font document IDs from auto-generated to slug-based IDs, updating all references across your content.
+
+### 2. Convert to Weak References
+Transforms strong document references into weak references across matching documents.
+
+### 3. Delete Unused Assets
+Scans for unreferenced image and file assets and allows bulk deletion with preview thumbnails.
+
+### 4. Duplicate and Rename
+Copies field values to new field names across all documents of a specific type.
+
+### 5. Export Data
+Exports documents to CSV or JSON formats with optional reference population.
+
+### 6. Get Font Data
+Analyzes uploaded font files using fontkit, displaying metadata and OpenType properties.
+
+### 7. Search & Add Data
+Bulk add or replace field data with multiple modes:
+- Full Replace
+- Find & Replace
+- Prepend
+- Append
+- Transform (toLowerCase, toUpperCase, trim)
+
+### 8. Search & Delete
+Searches for and deletes documents matching specific criteria with confirmation dialogs.
+
+## Safety Features
+
+- **Danger Mode Locks**: Destructive operations require unlocking danger mode
+- **Warning Modals**: 48-hour suppression option for danger mode warnings
+- **Confirmation Dialogs**: Double confirmation for bulk delete operations
+- **Preview Features**: See what will be affected before taking action
+
+## Requirements
+
+- Sanity Studio v3
+- React 18+
+- @sanity/ui v1 or v2
+- @sanity/icons v2 or v3
+
+## License
+
+UNLICENSED - Internal use only for Liiift Studio projects
+
+## Support
+
+For issues or questions, please contact the Liiift Studio development team.

package/SETUP.md

@@ -0,0 +1,166 @@
+# Setup & Publishing Guide
+
+## Initial Setup
+
+### 1. Install Dependencies
+
+This package has no production dependencies (only peer dependencies). No installation needed.
+
+### 2. Configure NPM Authentication
+
+Create or update `.npmrc` in your project root:
+
+```
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
+```
+
+Set the NPM_TOKEN environment variable with your npm authentication token.
+
+### 3. Verify Package Contents
+
+Check what will be published:
+
+```bash
+npm pack --dry-run
+```
+
+## Publishing
+
+### Version Bump
+
+Follow semantic versioning:
+
+```bash
+# Patch release (bug fixes)
+npm version patch
+
+# Minor release (new features, backward compatible)
+npm version minor
+
+# Major release (breaking changes)
+npm version major
+```
+
+### Publish to NPM
+
+```bash
+npm publish
+```
+
+## Integration in Consumer Projects
+
+### 1. Install the Package
+
+In your Sanity project (e.g., Darden-Studio):
+
+```bash
+npm install @liiift-studio/sanity-utilities
+```
+
+### 2. Update sanity.config.js
+
+Import and use the utilities desk:
+
+```js
+import { UtilitiesDesk } from '@liiift-studio/sanity-utilities';
+
+export default defineConfig({
+	// ... other config
+	
+	structure: (S) =>
+		S.list()
+			.title('Content')
+			.items([
+				// ... other list items
+				
+				S.listItem()
+					.title('Utilities')
+					.child(
+						S.component(UtilitiesDesk).title('Utilities')
+					),
+			]),
+});
+```
+
+### 3. Remove Old Utility Files (if migrating)
+
+After confirming the package works, remove the old utility files:
+
+```bash
+rm -rf sanity/schemas/components/utilities/
+```
+
+Update any imports that referenced the old location.
+
+## Updating the Package
+
+### Making Changes
+
+1. Make your changes to the component files
+2. Test in a consumer project (use `npm link` for local testing)
+3. Bump the version: `npm version patch|minor|major`
+4. Publish: `npm publish`
+
+### Testing Locally Before Publishing
+
+In the package directory:
+
+```bash
+npm link
+```
+
+In the consumer project:
+
+```bash
+npm link @liiift-studio/sanity-utilities
+```
+
+Test your changes, then unlink:
+
+```bash
+npm unlink @liiift-studio/sanity-utilities
+npm install @liiift-studio/sanity-utilities
+```
+
+## Updating Consumer Projects
+
+After publishing a new version:
+
+```bash
+npm install @liiift-studio/sanity-utilities@latest
+```
+
+Or update the version in package.json and run:
+
+```bash
+npm install
+```
+
+## Troubleshooting
+
+### Package Not Found
+
+Ensure you're authenticated with npm and have access to the @liiift-studio scope.
+
+### Import Errors
+
+Check that peer dependencies are installed in the consumer project:
+- @sanity/icons
+- @sanity/ui
+- react
+- sanity
+
+### Component Not Rendering
+
+Verify the imports match the exports in index.js. Use named imports:
+
+```js
+import { UtilitiesDesk } from '@liiift-studio/sanity-utilities';
+```
+
+Not default imports:
+
+```js
+// ❌ Wrong
+import UtilitiesDesk from '@liiift-studio/sanity-utilities';
+```

package/components/ConvertIdsToSlug.jsx

@@ -0,0 +1,151 @@
+// Component for converting document IDs to slug-based IDs
+import { Stack, Grid, Heading, Text, Button, Select } from '@sanity/ui'
+import { LockIcon, UnlockIcon } from '@sanity/icons'
+import { useState, useEffect } from 'react'
+import DangerModeWarning, { shouldShowDangerWarning } from './DangerModeWarning'
+
+/**
+ * Convert IDs to Slug Component
+ * Converts document IDs to slug-based IDs for better URL handling
+ * @param {Object} props - Component props
+ * @param {SanityClient} props.client - Sanity client instance
+ */
+const ConvertIdsToSlug = (props) => {
+	const {client} = props;
+	const [typefaces, setTypefaces] = useState([]);
+	const [targetTypeface, setTargetTypeface] = useState('');
+	const [dangerMode, setDangerMode] = useState(false);
+	const [convertMessage, setConvertMessage] = useState('');
+	const [showWarningModal, setShowWarningModal] = useState(false);
+
+	/**
+	 * Handle danger mode toggle with warning modal
+	 */
+	const handleDangerModeToggle = () => {
+		if (!dangerMode && shouldShowDangerWarning()) {
+			// Trying to enable danger mode, show warning
+			setShowWarningModal(true);
+		} else {
+			// Either disabling danger mode or warning is suppressed
+			setDangerMode(!dangerMode);
+		}
+	};
+
+	const handleWarningConfirm = () => {
+		setShowWarningModal(false);
+		setDangerMode(true);
+	};
+
+	const handleWarningCancel = () => {
+		setShowWarningModal(false);
+	};
+
+	async function getTypefaces(){
+		let typefaces = await client.fetch(`*[_type == "typeface" && !(_id in path('drafts.**'))]`);
+		setTypefaces(typefaces);
+	}
+
+	useEffect(() => {
+		getTypefaces();
+	}, [])
+
+	async function updateIdsToSlug(){
+		console.log(`Scanning ${targetTypeface}`)
+		
+		let typeface = await client.fetch(`*[_type == "typeface" && title match "${targetTypeface}*"][0]`);
+		let typefaceIds = [];
+		typeface.styles.fonts.forEach(font => {
+			typefaceIds.push(font._ref);
+		});
+		console.log('Target Ids:', typefaceIds);
+
+		for await (let [index, id] of typefaceIds.entries()) {
+			const rootDoc = await client.fetch(`*[_id == "${id}"][0]`);
+			const refDocs = await client.fetch(`*[references("${id}")]`);
+			const slug = rootDoc?.slug?.current;
+			
+			if (slug) {
+				console.log(`[${index}/${typefaceIds.length}] Creating new document: `, slug);
+				const newDoc = await client.createOrReplace({ ...rootDoc, _id: slug })  
+				console.log("New document: ", newDoc);
+
+				for await (let [refIndex, ref] of refDocs.entries()) {
+					let refString = JSON.stringify(ref);
+					refString = refString.replaceAll(id, slug);
+					let refObject = JSON.parse(refString);
+					
+					console.log(`[${index}/${typefaceIds.length}][${refIndex}/${refDocs.length}] Updating document: `, ref._id);
+					await client
+						.patch(ref._id)
+						.set(refObject)
+						.commit();
+				}
+		
+				// Delete the old document
+				console.log("Deleting old document: ", id);
+				await client.delete(id)
+
+				console.log("Updated all instances of ", id, " to ", slug);
+		
+			} else {
+				console.log('No Slug Found', rootDoc);
+			}
+		}
+	}
+
+	return (
+		<>
+			<DangerModeWarning
+				isOpen={showWarningModal}
+				onConfirm={handleWarningConfirm}
+				onCancel={handleWarningCancel}
+				utilityName="Convert IDs to Slug"
+			/>
+
+			<Stack style={{paddingTop: "4em", paddingBottom: "2em", position: "relative"}}>
+				<Heading as="h3" size={3}>{dangerMode ? "Convert " : ""}Typeface's Fonts IDs to their own Slugs</Heading>
+				<Text muted size={1} style={{paddingTop: "2em", maxWidth: "calc(100% - 100px)"}}>
+					Migrate font document IDs from auto-generated IDs to slug-based IDs for cleaner URLs and better content management. Automatically updates all references.
+				</Text>
+				<Button 
+					mode={dangerMode?"ghost":"bleed"} 
+					tone="critical" 
+					icon={dangerMode?UnlockIcon:LockIcon} 
+					onClick={handleDangerModeToggle} 
+					style={{cursor: "pointer", position: "absolute", bottom: "1.5em", right: "0"}}
+				/>
+			</Stack>
+
+			{dangerMode && (
+				<Stack style={{ position: "relative" }} >
+					<Select
+						style={{
+							borderRadius: "3px",
+						}}
+						onChange={(event) => { setTargetTypeface(event.currentTarget.value) }}
+						value={typefaces ? typefaces[0] : ""}
+					>
+						{typefaces && typefaces.map((typeface, index) => (
+							<option key={`typeface-${index}`} value={typeface.title}>{typeface.title}</option>
+						))}
+					</Select>
+					<p style={{opacity: "0.5"}}>Make sure you publish your updates first!<br/><br/></p>
+					<Button 
+						flex={12}  
+						tone="critical"
+						onClick={updateIdsToSlug}
+						text={"Convert"}
+					/>
+				</Stack>
+			)}
+
+			{convertMessage !== "" && (
+				<Stack>
+					<p style={{padding: ".5em 0em 1em", opacity: "0.75"}} dangerouslySetInnerHTML={{__html: convertMessage}}></p>
+				</Stack>
+			)}
+		</>
+	)
+}
+
+export default ConvertIdsToSlug

package/components/ConvertToWeakReferences.jsx

@@ -0,0 +1,230 @@
+// Component for converting strong references to weak references
+import { Stack, Grid, Heading, Text, Button, TextInput, Select } from '@sanity/ui'
+import { CollapseIcon, ExpandIcon, LockIcon, UnlockIcon } from '@sanity/icons'
+import { useState, useEffect } from 'react'
+import DangerModeWarning, { shouldShowDangerWarning } from './DangerModeWarning'
+
+/**
+ * Convert to Weak References Component
+ * Converts strong references to weak references across documents
+ * @param {Object} props - Component props
+ * @param {SanityClient} props.client - Sanity client instance
+ */
+const ConvertToWeakReferences = (props) => {
+	const { client } = props;
+	const [ convertValue, setConvertValue ] = useState('');
+	const [ convertible, setConvertible ] = useState([]);
+	const [ convertibleMessage, setConvertibleMessage ] = useState('');
+	const [ convertType, setConvertType ] = useState('typeface');
+	const [ excludeValue, setExcludeValue ] = useState('');
+	const [ exclude, setExclude ] = useState(false);
+	const [ dangerMode, setDangerMode ] = useState(false);
+	const [showWarningModal, setShowWarningModal] = useState(false);
+
+	/**
+	 * Handle danger mode toggle with warning modal
+	 */
+	const handleDangerModeToggle = () => {
+		if (!dangerMode && shouldShowDangerWarning()) {
+			// Trying to enable danger mode, show warning
+			setShowWarningModal(true);
+		} else {
+			// Either disabling danger mode or warning is suppressed
+			setDangerMode(!dangerMode);
+		}
+	};
+
+	const handleWarningConfirm = () => {
+		setShowWarningModal(false);
+		setDangerMode(true);
+	};
+
+	const handleWarningCancel = () => {
+		setShowWarningModal(false);
+	};
+
+	useEffect(() => {
+		if (!exclude) setExcludeValue("");
+	}, [exclude]);
+
+	async function searchFor(value) {
+		const items = await client.fetch(`
+			*[
+				_type == "${convertType}" 
+				&& title match "${value}*" 
+				${excludeValue !== "" ? ` && !(title match "*${excludeValue}*")` : ""}
+			]
+		`)  
+		setConvertible(items)
+	}
+
+	useEffect(() => {
+		searchFor(convertValue)
+	}, [convertValue, convertType, excludeValue])
+
+	function convert(){
+		setConvertibleMessage('Updating data...');
+		client
+			.fetch(`
+				*[
+					_type == "${convertType}" 
+					&& title match "${convertValue}*" 
+					${excludeValue !== "" ? ` && !(title match "*${excludeValue}*")` : ""}
+				]
+			`)
+			.then( async (items) => {
+				let updateDataCount = 0;
+
+				// convert items to string
+				let itemsString = JSON.stringify(items);
+
+				// search for all `"_type":"reference"` and replace with `"_type":"reference","_weak":true`
+				itemsString = itemsString.replace(/"_type":"reference"/g, '"_type":"reference","_weak":true');
+
+				// convert string back to object
+				let itemsObject = JSON.parse(itemsString);
+				
+				for (const item of itemsObject) {
+					try {
+						setConvertibleMessage(`Updating: ${item?.title ? item.title : item._id}`);
+						client.patch(item._id).set(item).commit()
+					} catch (e) {
+						console.error(e.message)
+						setConvertibleMessage('Error: ' + e.message);
+					}
+					await new Promise(r => setTimeout(r, 50));
+
+					updateDataCount++;
+					if (updateDataCount == itemsObject.length - 1) {
+						setConvertibleMessage('All Updated!');
+						setTimeout(()=>{
+							setConvertibleMessage("");
+						}, 2000)
+					}
+				}
+			})
+			.catch( (err)=>{ console.error(err) })
+	}
+	
+	return (
+		<>
+			<DangerModeWarning
+				isOpen={showWarningModal}
+				onConfirm={handleWarningConfirm}
+				onCancel={handleWarningCancel}
+				utilityName="Convert to Weak References"
+			/>
+
+			<Stack style={{paddingTop: "4em", paddingBottom: "2em", position: "relative"}}>
+				<Heading as="h3" size={3}>{dangerMode ? "Convert to " : ""}Weak References</Heading>
+				<Text muted size={1} style={{paddingTop: "2em", maxWidth: "calc(100% - 100px)"}}>
+					Transform strong document references into weak references across matching documents. Weak references don't prevent deletion and are useful for non-critical relationships.
+				</Text>
+				<div style={{position: "absolute", bottom: "1.5em", right: "0"}}>
+					<Button 
+						mode={exclude?"ghost":"bleed"}  
+						tone="positive" 
+						icon={exclude?CollapseIcon:ExpandIcon} 
+						onClick={() => { setExclude(!exclude) }} 
+						style={{cursor: "pointer", marginLeft: ".5em"}}
+					/>
+					<Button 
+						mode={dangerMode?"ghost":"bleed"} 
+						tone="critical" 
+						icon={dangerMode?UnlockIcon:LockIcon} 
+						onClick={handleDangerModeToggle} 
+						style={{cursor: "pointer", marginLeft: ".5em"}}
+					/>
+				</div>
+			</Stack>
+
+			<Stack style={{ position: "relative" }} >
+				<Grid columns={exclude ? [3] : [2]} gap={0} 
+					style={{
+						position: "relative",
+					}} 
+				>
+					<TextInput
+						style={{
+							borderRadius: "3px 0 0 0",
+						}}
+						onChange={(event) => { setConvertValue(event.currentTarget.value) }}
+						placeholder="Name"
+						value={convertValue}
+					/>
+					{!!exclude &&
+						<TextInput
+							style={{
+								display: exclude ? "" : "none",
+							}}
+							onChange={(event) => { setExcludeValue(event.currentTarget.value) }}
+							placeholder="Excluding"
+							value={excludeValue}
+						/>
+					}
+					<Select
+						style={{
+							borderRadius: "0 3px 0 0",
+						}}
+						onChange={(event) => { setConvertType(event.currentTarget.value) }}
+						value={convertType}
+					>
+						<option value="typeface">Typeface</option>
+						<option value="collection">Collection</option>
+						<option value="pair">Pair</option>
+						<option value="font">Font</option>
+						<option value="license">License</option>
+						<option value="order">Order</option>
+						<option value="account">Account</option>
+						<option value="cart">Cart</option>
+						<option value="page">Page</option>
+						<option value="blogpost">Blogpost</option>
+					</Select>
+				</Grid>
+			</Stack>
+
+			{ convertibleMessage!="" && (
+				<Stack>
+					<p style={{padding: ".5em 0em 1em", opacity: "0.75"}} dangerouslySetInnerHTML={{__html:  convertibleMessage}}></p>
+				</Stack>
+			)}
+
+			{ convertible.length > 0 && (
+				<>
+					<div 
+						style={{
+							maxHeight: "400px", 
+							marginTop: "5px", 
+							border: "1px solid rgba(255,255,255,0.1)", 
+							overflow: "auto",
+							paddingBottom: "1rem",
+							borderRadius: "3px",
+						}}
+					>
+						{ convertible.map((item, index) => (
+							<a 
+								target="_blank" 
+								key={`item-${index}`} 
+								className="link" 
+								href={`${window.location.origin}/desk/${(convertType === "typeface" || convertType === "licenseGroup") ? "orderable-" : ""}${convertType};${item._id}`}
+							>
+								<Stack>
+									<Text size={1} style={{padding: "1em 1em .5em"}}>{item.title}</Text>
+								</Stack>
+							</a>
+						))}
+					</div>
+					<div style={{pointerEvents: "none", textAlign: "right", top: "-30px", paddingRight: "10px", position: "relative", height: "30px"}}>{ convertible.length} items</div>      
+
+					{dangerMode && (
+						<Stack>
+							<Button text="Convert" tone="critical" onClick={() => { convert() }}/>
+						</Stack>
+					)}
+				</>
+			)}
+		</>
+	)
+}
+
+export default ConvertToWeakReferences