@liiift-studio/sanity-font-manager 2.3.19 → 2.5.0

package/src/components/StatusDisplay.jsx

@@ -1,26 +1,26 @@
-// Shared status bar — shows status message in green/red with an optional action slot on the far right
-
-import React from 'react';
-import { Flex, Text } from '@sanity/ui';
-
-/**
- * Shows an upload/operation status string coloured green on success and red on error.
- * Accepts an optional `action` element rendered on the far right.
- * @param {Object} props
- * @param {string} props.status - Status message to display
- * @param {boolean} props.error - Whether the current status represents an error
- * @param {React.ReactNode} [props.action] - Optional element to render on the far right
- */
-const StatusDisplay = ({ status, error, action }) => {
-	return (
-		<Flex paddingTop={1} paddingBottom={3} align="center" justify="space-between">
-			<Flex align="center" gap={2}>
-				<Text size={1}>Status:</Text>
-				<Text size={1} style={{ color: error ? 'red' : 'green' }}>{status}</Text>
-			</Flex>
-			{action && action}
-		</Flex>
-	);
-};
-
-export default StatusDisplay;
+// Shared status bar — shows status message in green/red with an optional action slot on the far right
+
+import React from 'react';
+import { Flex, Text } from '@sanity/ui';
+
+/**
+ * Shows an upload/operation status string coloured green on success and red on error.
+ * Accepts an optional `action` element rendered on the far right.
+ * @param {Object} props
+ * @param {string} props.status - Status message to display
+ * @param {boolean} props.error - Whether the current status represents an error
+ * @param {React.ReactNode} [props.action] - Optional element to render on the far right
+ */
+const StatusDisplay = ({ status, error, action }) => {
+	return (
+		<Flex paddingTop={1} paddingBottom={3} align="center" justify="space-between">
+			<Flex align="center" gap={2}>
+				<Text size={1}>Status:</Text>
+				<Text size={1} style={{ color: error ? 'red' : 'green' }}>{status}</Text>
+			</Flex>
+			{action && action}
+		</Flex>
+	);
+};
+
+export default StatusDisplay;

package/src/components/StyleCountInput.jsx

@@ -1,16 +1,16 @@
-// Displays the total count of static and variable font styles linked to a typeface document
-
-import React from 'react';
-import { Text } from '@sanity/ui';
-import { useFormValue } from 'sanity';
-
-/** Reads styles.fonts and styles.variableFont arrays and displays the combined count. */
-export const StyleCountInput = (props) => {
-	const styles = useFormValue(['styles', 'fonts']) || [];
-	const vfStyles = useFormValue(['styles', 'variableFont']) || [];
-	const count = styles.length + vfStyles.length;
-
-	return (
-		<Text size={1}>{count}</Text>
-	);
-};
+// Displays the total count of static and variable font styles linked to a typeface document
+
+import React from 'react';
+import { Text } from '@sanity/ui';
+import { useFormValue } from 'sanity';
+
+/** Reads styles.fonts and styles.variableFont arrays and displays the combined count. */
+export const StyleCountInput = (props) => {
+	const styles = useFormValue(['styles', 'fonts']) || [];
+	const vfStyles = useFormValue(['styles', 'variableFont']) || [];
+	const count = styles.length + vfStyles.length;
+
+	return (
+		<Text size={1}>{count}</Text>
+	);
+};

package/src/components/UpdateScriptsComponent.jsx

@@ -1,76 +1,76 @@
-// Updates and re-links existing script font variant references on font documents
-
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Stack, Text, Button } from '@sanity/ui';
-import { useFormValue, set } from 'sanity';
-
-import { useSanityClient } from '../hooks/useSanityClient';
-
-/**
- * Wraps the default Sanity scripts array input with a button that reads
- * scriptFileInput from all linked font documents and syncs the list.
- * @param {Object} props - Sanity input component props
- */
-export const UpdateScriptsComponent = (props) => {
-	const { onChange } = props;
-
-	const client = useSanityClient();
-	const scripts = useFormValue(['scripts']) || [];
-	const fonts = useFormValue(['styles', 'fonts']);
-
-	const isReadyRef = useRef(false);
-	const [message, setMessage] = useState('');
-
-	// Delay ready flag to avoid triggering onChange during initial mount
-	useEffect(() => {
-		const timer = setTimeout(() => { isReadyRef.current = true; }, 100);
-		return () => clearTimeout(timer);
-	}, []);
-
-	/** Fetches all linked font documents and derives the unique script list from their scriptFileInput fields. */
-	const updateFromFonts = useCallback(async () => {
-		if (!fonts || fonts.length === 0) {
-			setMessage('No fonts found to extract scripts from');
-			return;
-		}
-
-		const fontRefs = fonts.map(font => font._ref);
-
-		let result;
-		try {
-			result = await client.fetch(
-				`*[_type == "font" && _id in $fontRefs]{ _id, scriptFileInput }`,
-				{ fontRefs }
-			);
-		} catch (err) {
-			console.error('Failed to fetch font documents:', err);
-			setMessage('Error updating scripts: ' + err.message);
-			return;
-		}
-
-		const newScripts = result.reduce((acc, font) => {
-			if (!font?.scriptFileInput) return acc;
-			for (const language of Object.keys(font.scriptFileInput)) {
-				if (!acc.includes(language)) acc.push(language);
-			}
-			return acc;
-		}, []);
-
-		if (isReadyRef.current) onChange(set(newScripts));
-		setMessage('Scripts updated');
-	}, [onChange, fonts, client]);
-
-	return (
-		<Stack space={3}>
-			<Button
-				mode="ghost"
-				tone="primary"
-				width="fill"
-				text="Update Scripts from Font Files"
-				onClick={updateFromFonts}
-			/>
-			{message && <Text size={1} style={{ color: 'green' }}>{message}</Text>}
-			{props.renderDefault(props)}
-		</Stack>
-	);
-};
+// Updates and re-links existing script font variant references on font documents
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Stack, Text, Button } from '@sanity/ui';
+import { useFormValue, set } from 'sanity';
+
+import { useSanityClient } from '../hooks/useSanityClient';
+
+/**
+ * Wraps the default Sanity scripts array input with a button that reads
+ * scriptFileInput from all linked font documents and syncs the list.
+ * @param {Object} props - Sanity input component props
+ */
+export const UpdateScriptsComponent = (props) => {
+	const { onChange } = props;
+
+	const client = useSanityClient();
+	const scripts = useFormValue(['scripts']) || [];
+	const fonts = useFormValue(['styles', 'fonts']);
+
+	const isReadyRef = useRef(false);
+	const [message, setMessage] = useState('');
+
+	// Delay ready flag to avoid triggering onChange during initial mount
+	useEffect(() => {
+		const timer = setTimeout(() => { isReadyRef.current = true; }, 100);
+		return () => clearTimeout(timer);
+	}, []);
+
+	/** Fetches all linked font documents and derives the unique script list from their scriptFileInput fields. */
+	const updateFromFonts = useCallback(async () => {
+		if (!fonts || fonts.length === 0) {
+			setMessage('No fonts found to extract scripts from');
+			return;
+		}
+
+		const fontRefs = fonts.map(font => font._ref);
+
+		let result;
+		try {
+			result = await client.fetch(
+				`*[_type == "font" && _id in $fontRefs]{ _id, scriptFileInput }`,
+				{ fontRefs }
+			);
+		} catch (err) {
+			console.error('Failed to fetch font documents:', err);
+			setMessage('Error updating scripts: ' + err.message);
+			return;
+		}
+
+		const newScripts = result.reduce((acc, font) => {
+			if (!font?.scriptFileInput) return acc;
+			for (const language of Object.keys(font.scriptFileInput)) {
+				if (!acc.includes(language)) acc.push(language);
+			}
+			return acc;
+		}, []);
+
+		if (isReadyRef.current) onChange(set(newScripts));
+		setMessage('Scripts updated');
+	}, [onChange, fonts, client]);
+
+	return (
+		<Stack space={3}>
+			<Button
+				mode="ghost"
+				tone="primary"
+				width="fill"
+				text="Update Scripts from Font Files"
+				onClick={updateFromFonts}
+			/>
+			{message && <Text size={1} style={{ color: 'green' }}>{message}</Text>}
+			{props.renderDefault(props)}
+		</Stack>
+	);
+};

package/src/components/UploadButton.jsx

@@ -1,43 +1,43 @@
-// Label-wrapped button that triggers a hidden file input
-
-import React, { forwardRef } from 'react';
-import { Button, Text } from '@sanity/ui';
-
-/**
- * Primary button with a transparent full-size file input overlay.
- * The ref is forwarded to the hidden <input> element.
- * @param {Object} props
- * @param {Function} props.handleUpload - onChange handler for the file input
- */
-const UploadButton = forwardRef(({ handleUpload }, ref) => {
-	return (
-		<Button
-			mode="ghost"
-			tone="primary"
-			width="fill"
-			padding={3}
-			style={{ position: 'relative' }}
-		>
-			<Text align="center">Upload (ttf/otf/woff/woff2/etc...)</Text>
-			<input
-				ref={ref}
-				type="file"
-				multiple
-				style={{
-					position: 'absolute',
-					top: 0,
-					left: 0,
-					width: '100%',
-					height: '100%',
-					opacity: 0,
-					cursor: 'pointer',
-				}}
-				onChange={handleUpload}
-			/>
-		</Button>
-	);
-});
-
-UploadButton.displayName = 'UploadButton';
-
-export default UploadButton;
+// Label-wrapped button that triggers a hidden file input
+
+import React, { forwardRef } from 'react';
+import { Button, Text } from '@sanity/ui';
+
+/**
+ * Primary button with a transparent full-size file input overlay.
+ * The ref is forwarded to the hidden <input> element.
+ * @param {Object} props
+ * @param {Function} props.handleUpload - onChange handler for the file input
+ */
+const UploadButton = forwardRef(({ handleUpload }, ref) => {
+	return (
+		<Button
+			mode="ghost"
+			tone="primary"
+			width="fill"
+			padding={3}
+			style={{ position: 'relative' }}
+		>
+			<Text align="center">Upload (ttf/otf/woff/woff2/etc...)</Text>
+			<input
+				ref={ref}
+				type="file"
+				multiple
+				style={{
+					position: 'absolute',
+					top: 0,
+					left: 0,
+					width: '100%',
+					height: '100%',
+					opacity: 0,
+					cursor: 'pointer',
+				}}
+				onChange={handleUpload}
+			/>
+		</Button>
+	);
+});
+
+UploadButton.displayName = 'UploadButton';
+
+export default UploadButton;

package/src/components/UploadModal.jsx

@@ -0,0 +1,268 @@
+// Upload modal — 3-step state machine: Settings → Review → Execute
+
+import React, { useReducer, useCallback, useState, useMemo, useRef, useEffect } from 'react';
+import { Dialog, Box, Flex, Text, Badge, Button } from '@sanity/ui';
+import { planReducer } from '../utils/planReducer';
+import { createEmptyPlan, PLAN_PHASE } from '../utils/planTypes';
+import { buildUploadPlan } from '../utils/buildUploadPlan';
+import { generateStyleKeywords } from '../utils/generateKeywords';
+import UploadStep1Settings from './UploadStep1Settings';
+import UploadStep2Review from './UploadStep2Review';
+import UploadStep3Execute from './UploadStep3Execute';
+import UploadSummary from './UploadSummary';
+
+/** Step labels for the step indicator */
+const STEPS = [
+	{ key: 1, label: 'Upload Files' },
+	{ key: 2, label: 'Review' },
+	{ key: 3, label: 'Upload' },
+];
+
+/** Maps plan phase to active step number */
+function phaseToStep(phase) {
+	switch (phase) {
+		case PLAN_PHASE.IDLE: return 1;
+		case PLAN_PHASE.PROCESSING: return 2;
+		case PLAN_PHASE.REVIEWING: return 2;
+		case PLAN_PHASE.READY: return 2;
+		case PLAN_PHASE.EXECUTING: return 3;
+		case PLAN_PHASE.COMPLETE: return 3;
+		case PLAN_PHASE.ERROR: return 3;
+		default: return 1;
+	}
+}
+
+/**
+ * Upload modal — wraps the 3-step upload workflow in a Sanity UI Dialog.
+ */
+export default function UploadModal({
+	open,
+	onClose,
+	client,
+	docId,
+	typefaceTitle,
+	stylesObject,
+	preferredStyleRef,
+	slug,
+}) {
+	const [plan, dispatch] = useReducer(planReducer, null, () => createEmptyPlan());
+	const [processingCancelled, setProcessingCancelled] = useState(false);
+	const [executionResult, setExecutionResult] = useState(null);
+	const [retryTempIds, setRetryTempIds] = useState(null);
+	const cancelRef = useRef(false);
+	const focusRef = useRef(null);
+
+	const { weightKeywordList, italicKeywordList } = useMemo(() => generateStyleKeywords(), []);
+	const currentStep = phaseToStep(plan.phase);
+	const isExecuting = plan.phase === PLAN_PHASE.EXECUTING;
+
+	// Prevent accidental close during upload
+	useEffect(() => {
+		if (!open || !isExecuting) return;
+		const handler = (e) => { e.preventDefault(); e.returnValue = ''; };
+		window.addEventListener('beforeunload', handler);
+		return () => window.removeEventListener('beforeunload', handler);
+	}, [open, isExecuting]);
+
+	// Focus management on step transitions
+	useEffect(() => {
+		if (focusRef.current) {
+			focusRef.current.focus();
+		}
+	}, [currentStep]);
+
+	/** Handle close — confirm if plan has data, block during execution */
+	const handleClose = useCallback(() => {
+		if (isExecuting) return;
+		const hasFonts = Object.keys(plan.fonts).length > 0;
+		if (hasFonts && plan.phase !== PLAN_PHASE.COMPLETE) {
+			if (!window.confirm('Close the upload modal? All progress will be lost.')) return;
+		}
+		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.IDLE });
+		setExecutionResult(null);
+		onClose();
+	}, [plan, isExecuting, onClose]);
+
+	/** Start processing — transition to Step 2 and build the plan */
+	const handleStartProcessing = useCallback(async (files, settings) => {
+		dispatch({ type: 'SET_SETTINGS', settings });
+		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.PROCESSING, totalFiles: files.length });
+		cancelRef.current = false;
+		setProcessingCancelled(false);
+		setExecutionResult(null);
+
+		try {
+			const builtPlan = await buildUploadPlan({
+				files,
+				typefaceTitle,
+				docId,
+				settings,
+				client,
+				stylesObject,
+				weightKeywordList,
+				italicKeywordList,
+				onProgress: (event) => {
+					if (cancelRef.current) return;
+					// Update progress counter only — don't add entries yet (they haven't been merged by documentId)
+					if (event.type === 'font-processed' || event.type === 'font-error') {
+						dispatch({ type: 'UPDATE_PROCESSING_PROGRESS', progress: event.progress });
+					}
+				},
+			});
+
+			if (!cancelRef.current) {
+				// Dispatch the final merged plan entries (files with the same documentId are already grouped)
+				for (const [tempId, entry] of Object.entries(builtPlan.fonts)) {
+					dispatch({ type: 'ADD_PROCESSED_FONT', tempId, fontEntry: entry });
+				}
+				dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.REVIEWING });
+			}
+		} catch (err) {
+			console.error('Processing failed:', err);
+			dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.REVIEWING });
+		}
+	}, [typefaceTitle, docId, client, stylesObject, weightKeywordList, italicKeywordList]);
+
+	/** Cancel processing and return to Step 1 */
+	const handleCancelProcessing = useCallback(() => {
+		cancelRef.current = true;
+		setProcessingCancelled(true);
+		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.IDLE });
+	}, []);
+
+	/** Transition to execution */
+	const handleStartExecution = useCallback(() => {
+		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.EXECUTING });
+	}, []);
+
+	/** Receive execution result and mark complete */
+	const handleExecutionComplete = useCallback((result) => {
+		setExecutionResult(result);
+		dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.COMPLETE });
+	}, []);
+
+	if (!open) return null;
+
+	/** Navigate to a step by clicking the step indicator */
+	const handleStepClick = useCallback((stepKey) => {
+		if (isExecuting) return;
+		if (stepKey === currentStep) return;
+		// Can only go back to step 1 (reset to settings)
+		if (stepKey === 1 && currentStep > 1) {
+			if (Object.keys(plan.fonts).length > 0) {
+				if (!window.confirm('Go back to settings? Current review progress will be lost.')) return;
+			}
+			dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.IDLE });
+		}
+	}, [currentStep, isExecuting, plan.fonts, dispatch]);
+
+	return (
+		<Dialog
+			id="upload-modal"
+			header={
+				<Flex direction="column" gap={3} style={{ width: '100%' }}>
+					<Text weight="semibold" size={2}>Upload Fonts</Text>
+					<Flex gap={1} style={{ width: '100%' }}>
+						{STEPS.map((step, i) => {
+							const isActive = currentStep === step.key;
+							const isCompleted = currentStep > step.key;
+							const isClickable = !isExecuting && step.key < currentStep;
+							return (
+								<Box
+									key={step.key}
+									as={isClickable ? 'button' : 'div'}
+									onClick={isClickable ? () => handleStepClick(step.key) : undefined}
+									style={{
+										flex: 1,
+										padding: '10px 12px',
+										border: 'none',
+										borderRadius: 4,
+										cursor: isClickable ? 'pointer' : 'default',
+										background: isActive
+											? 'var(--card-badge-primary-bg-color)'
+											: isCompleted
+												? 'var(--card-badge-positive-bg-color)'
+												: 'var(--card-muted-bg-color)',
+										color: isActive || isCompleted
+											? '#fff'
+											: 'var(--card-muted-fg-color)',
+										textAlign: 'center',
+										transition: 'background 0.15s ease',
+										opacity: !isActive && !isCompleted ? 0.6 : 1,
+									}}
+								>
+									<Text
+										size={1}
+										weight={isActive ? 'bold' : 'medium'}
+										style={{ color: 'inherit' }}
+									>
+										{step.key}. {step.label}
+									</Text>
+								</Box>
+							);
+						})}
+					</Flex>
+				</Flex>
+			}
+			width={2}
+			onClose={isExecuting ? undefined : handleClose}
+			onClickOutside={() => {}}
+		>
+			<Box padding={4}>
+				{/* Step 1: Settings & File Selection */}
+				{currentStep === 1 && (
+					<UploadStep1Settings
+						settings={plan.settings}
+						onStartProcessing={handleStartProcessing}
+					/>
+				)}
+
+				{/* Step 2: Processing & Review */}
+				{currentStep === 2 && (
+					<UploadStep2Review
+						plan={plan}
+						dispatch={dispatch}
+						onCancelProcessing={handleCancelProcessing}
+						onStartExecution={handleStartExecution}
+						processingCancelled={processingCancelled}
+					/>
+				)}
+
+				{/* Step 3: Upload Execution */}
+				{currentStep === 3 && plan.phase !== PLAN_PHASE.COMPLETE && (
+					<UploadStep3Execute
+						key={retryTempIds ? 'retry' : 'initial'}
+						plan={plan}
+						client={client}
+						docId={docId}
+						stylesObject={stylesObject}
+						preferredStyleRef={preferredStyleRef}
+						retryTempIds={retryTempIds}
+						onComplete={(result) => {
+							setRetryTempIds(null);
+							handleExecutionComplete(result);
+						}}
+					/>
+				)}
+
+				{/* Post-completion Summary */}
+				{plan.phase === PLAN_PHASE.COMPLETE && (
+					<UploadSummary
+						plan={plan}
+						result={executionResult}
+						onClose={handleClose}
+						onRetry={(failedTempIds) => {
+							setRetryTempIds(failedTempIds || null);
+							setExecutionResult(null);
+							dispatch({ type: 'SET_PHASE', phase: PLAN_PHASE.EXECUTING });
+						}}
+						client={client}
+						docId={docId}
+						stylesObject={stylesObject}
+						preferredStyleRef={preferredStyleRef}
+					/>
+				)}
+			</Box>
+		</Dialog>
+	);
+}