@liiift-studio/sanity-font-manager 2.7.0 → 2.8.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;